1 files changed, 39 insertions, 0 deletions
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/style.css b/packages/meshbay-hub/src/meshbay_hub/static/style.css
index f426f8d..975f47c 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/style.css
+++ b/packages/meshbay-hub/src/meshbay_hub/static/style.css
@@ -1859,6 +1859,13 @@ a.transfer-name {
   /* The actions sit on their own line under the toggle, and wrap within it. */
   .tb-actions { width: 100%; }
 
+  /* video-app.js's toolbar isn't built from .toolbar-group (nothing else in
+     it needs a right-hand group), so it never got the row-per-group
+     treatment above — mode buttons + the All/Movies/Series control left no
+     room at all for the filter field once both were on the same line. */
+  .video-toolbar { flex-wrap: wrap; }
+  .video-toolbar .tb-search { flex-basis: 100%; margin-left: 0; }
+
   /* Every pixel here is one the conversation does not get. */
   .group-header { margin-bottom: 10px; gap: 8px; }
   .group-tabs { margin-bottom: 10px; }
@@ -2563,6 +2570,38 @@ a.transfer-name {
 }
 .video-toolbar .tb-search { margin-left: auto; }
 
+/* All/Movies/Series — a segmented control, not three separate .tb-btn: the
+   three are mutually exclusive (unlike the view-mode buttons, which read
+   fine standalone), and grouping them under one shared border is what says
+   so at a glance. */
+.tb-typefilter {
+  display: inline-flex;
+  height: 32px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+.tb-typefilter button {
+  display: inline-flex;
+  align-items: center;
+  height: 100%;
+  padding: 0 12px;
+  border: none;
+  background: var(--bg-surface);
+  color: var(--text-dim);
+  font-size: 0.83em;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background 0.12s, color 0.12s;
+}
+.tb-typefilter button + button { border-left: 1px solid var(--border); }
+.tb-typefilter button:hover { color: var(--accent); }
+.tb-typefilter button.active {
+  background: var(--accent);
+  color: var(--accent-text);
+}
+
 /* Mode A — poster grid */
 
 .video-grid {