Move Findbar to Top: Firefox 155+

This really needs to be a default option Mozilla!!! Put the Firefox Findbar (Ctrl-F) search back to the top where it belongs!

Pre Firefox v155+ updates will likely leave your userChrome custom CSS destroyed and parts of your Firefox UI missing or semi-broken. More awesome work at: https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome by MrOtherGuy.

This code below will also increase your pinned tab width for a little bit more readability other than an icon.

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/floating_findbar_on_top.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* This style makes findbar appear as floating box at the top-left of the content area.
 * If you want the findbar on right side instead then create a new pref
 * userchrome.floating-findbar-on-right.enabled and set it to true and restart Firefox
 * 
 * Note that privacy.resistFingerprinting.letterboxing prevents this from working properly
 */

findbar{
  order: -1;
  position: relative;
  border-top: none !important;
  padding: 0 !important;
  transition: transform 82ms linear, opacity 82ms linear 32ms !important;
  background: none !important;
  pointer-events: none;
  z-index: 1;
  white-space: nowrap;
  grid-area: notificationbox !important;
  margin-bottom: calc(0px - var(--findbar-height,34px));
}

.findbar-container > .findbar-find-fast{
  padding: var(--toolbarbutton-padding-inner,var(--toolbarbutton-inner-padding)) 1px;
  margin: 0 !important;
}

findbar[hidden]{ transform: translateY(-30px);}

findbar > .findbar-container,
findbar > .close-icon{
  border: 1px solid var(--chrome-content-separator-color);
  border-width: 0 0 1px 0px;
  background-color: var(--lwt-accent-color,var(--toolbox-background-color,var(--toolbox-bgcolor))) !important;
  background-image: linear-gradient(var(--toolbar-background-color,var(--toolbar-bgcolor))),var(--lwt-header-image,none);
  pointer-events: auto;
}
.findbar-closebutton{
  border-bottom-color: var(--chrome-content-separator-color) !important;
}
findbar > .findbar-container{
  border-bottom-right-radius: 4px;
  border-right-width: 1px;
  height: initial !important;
  margin-inline: 0px !important;
  overflow-inline: visible !important;
}

.findbar-find-status{
  display: flex;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-grow: 1;
}
 
.findbar-closebutton{
  margin: 0 !important;
  border-radius: 0 !important;
  padding: 5px !important;
  width: initial !important;
  order: -1;
}
.findbar-closebutton > image{ padding: 3px }
.findbar-closebutton:hover > image{
  background: var(--toolbarbutton-background-color-hover,var(--toolbarbutton-hover-background)) !important;
  border-radius: 4px
}
findbar > .findbar-container > hbox{ margin: 0 5px }
 
findbar::after{
  content:"";
  display: flex;
  flex-grow: 100;
} 

@media -moz-pref("userchrome.floating-findbar-on-right.enabled"){
  findbar{
    flex-direction: row-reverse;
  }
  findbar > .findbar-container{
    flex-direction: row-reverse;
    border-inline-width: 1px 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 4px;
  }
  /*
  Move findbar so it isn't over the scrollbar
  Delete if you want findbar to begin from right window edge
  */
  findbar{
    margin-right: 16px;
    border-right: 1px solid var(--chrome-content-separator-color);
  }
}

/* Optional: Keep your pinned tab adjustment if needed */
.tab-label-container[pinned] {
  width: 60px !important;
}