Here is (what I believe to be) a working Custom CSS for version 7.x of Vivaldi. It will fit 7 pinned tabs on a row (Dependent on Screen resolution) before making a new row of pinned tabs.
/* Make pinned tabs display in a row */ .tab-strip { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 4px !important; row-gap: 0 !important; } /* Fix pinned tab positioning and size */ .tab-position.is-pinned { position: static !important; width: 32px !important; height: 32px !important; transform: none !important; --PositionX: 2 !important; --PositionY: 0 !important; margin: 0 !important; padding: 0 !important; } /* Add this new rule to fix regular tab positioning */ .tab-position:not(.is-pinned) { position: static !important; transform: none !important; --PositionX: 0 !important; --PositionY: 0 !important; margin: 0 !important; padding: 0 !important; } /* Style pinned tabs */ .tab.pinned { width: 32px !important; min-width: 32px !important; max-width: 32px !important; height: 32px !important; margin: 0 !important; padding: 0 !important; } /* Center favicon and remove extra spacing */ .tab.pinned .tab-header { display: flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; padding: 0 !important; margin: 0 !important; } /* Hide unnecessary elements in pinned tabs */ .tab.pinned .title, .tab.pinned .close { display: none !important; } /* Adjust favicon size and position */ .tab.pinned .favicon { display: flex !important; align-items: center !important; justify-content: center !important; width: 16px !important; height: 16px !important; margin: 0 !important; padding: 0 !important; } .tab.pinned .favicon img { width: 16px !important; height: 16px !important; } /* Completely remove the separator and any spacing */ .separator, .separator-wsbutton, hr { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; border: none !important; } /* Remove any spacing between tab elements */ .tab-strip > span { margin: 0 !important; padding: 0 !important; } /* Ensure non-pinned tabs align properly */ .tab-position:not(.is-pinned) { margin-top: 5px !important; /* Add 2px gap between non-pinned tabs */ } /* Fix spacing between all tabs */ .tab-position { height: 32px !important; /* Force consistent height */ min-height: 32px !important; max-height: 32px !important; } /* Fix tab wrapper spacing */ .tab-wrapper { height: 32px !important; min-height: 32px !important; max-height: 32px !important; margin: 0 !important; padding: 0 !important; } /* Ensure consistent tab height */ .tab { height: 32px !important; min-height: 32px !important; max-height: 32px !important; margin: 0 !important; padding: 0 !important; } /* Update tab wrapper spacing for non-pinned tabs */ .tab-position:not(.is-pinned) .tab-wrapper { height: 32px !important; min-height: 32px !important; max-height: 32px !important; margin: 0 !important; padding: 0 !important; }