fix

public/style.css

@@ -201,9 +201,34 @@ body.sidebar-collapsed #btn-sidebar-expand { display: grid; }
 #stage.empty #stage-empty { display: grid; }
 #stage:not(.empty) #stage-empty { display: none; }
 
-#screens { display: flex; gap: 12px; flex-wrap: wrap; flex: 1; min-height: 0; align-items: stretch; }
-#screens.multi { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); align-content: stretch; }
-#screens.multi .screen-card { flex: none; }
+#screens { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; }
+
+/* own share(s): compact pill, no video preview */
+.own-pills { display: flex; flex-wrap: wrap; gap: 8px; flex: none; }
+.own-pill {
+  display: inline-flex; align-items: center; gap: 8px;
+  background: var(--bg-2); border: 1px solid var(--bg-4); border-radius: 999px;
+  padding: 5px 8px 5px 12px; font-size: 12px; font-weight: 600; color: var(--text-1);
+}
+.own-pill .live { color: var(--red); font-weight: 800; }
+.own-pill-close {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 22px; height: 22px; border-radius: 50%; border: none; cursor: pointer;
+  background: var(--bg-3); color: var(--text-0);
+}
+.own-pill-close .material-symbols-outlined { font-size: 15px; }
+.own-pill-close:hover { background: var(--red); }
+
+/* remote shares: fills remaining space, arranged in as large a grid as fits */
+.screens-body { flex: 1; min-height: 0; }
+.screens-grid { display: grid; gap: 12px; }
+.screens-grid .screen-card { max-width: 100%; }
+
+.screens-body.spotlight { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
+.screens-body.spotlight .screen-card.focused { flex: 1; min-height: 0; }
+.thumbs-row { display: flex; gap: 8px; flex: none; height: 110px; overflow-x: auto; }
+.thumbs-row .screen-card { flex: 0 0 180px; height: 100%; }
+
 .screen-card.popped {
   min-height: 120px; display: grid; place-items: center;
   background: var(--bg-0); box-shadow: none; border: 1px dashed var(--bg-4);
@@ -216,10 +241,9 @@ body.sidebar-collapsed #btn-sidebar-expand { display: grid; }
 }
 .pop-btn .material-symbols-outlined { font-size: 16px; }
 .pop-btn:hover { background: var(--brand); }
-.screen-card .stop-share-btn { right: 96px; }
 .screen-card {
   position: relative; background: #000; border-radius: var(--radius); overflow: hidden;
-  flex: 1 1 480px; max-width: 100%; box-shadow: 0 8px 24px rgba(0,0,0,.4);
+  box-shadow: 0 8px 24px rgba(0,0,0,.4); cursor: pointer;
 }
 .screen-card video { width: 100%; height: 100%; display: block; max-height: 100%; object-fit: contain; }
 .screen-card .label {
@@ -351,6 +375,19 @@ body.sidebar-collapsed #btn-sidebar-expand { display: grid; }
   height: 34vh; min-height: 220px; background: var(--bg-1);
   border-top: 1px solid rgba(0,0,0,.35); display: flex; flex-direction: column;
 }
+body.spatial-collapsed #spatial-wrap,
+body.spatial-collapsed #spatial-resizer { display: none; }
+
+/* floating button to bring the spatial pane back once collapsed */
+#btn-spatial-expand {
+  display: none; position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 20;
+  background: var(--bg-1); border: 1px solid var(--bg-4); color: var(--text-1);
+  width: 32px; height: 32px; border-radius: 6px; cursor: pointer; place-items: center;
+  box-shadow: 0 2px 6px rgba(0,0,0,.35);
+}
+#btn-spatial-expand .material-symbols-outlined { font-size: 18px; }
+#btn-spatial-expand:hover { background: var(--bg-3); color: var(--text-0); }
+body.spatial-collapsed #btn-spatial-expand { display: grid; }
 .spatial-label {
   padding: 8px 16px; font-size: 11px; font-weight: 700; color: var(--text-2);
   letter-spacing: .5px; display: flex; align-items: center; gap: 16px;
@@ -629,8 +666,9 @@ code { font-family: ui-monospace, monospace; font-size: 12px; }
 
   #main { width: 100%; padding-bottom: 64px; } /* room for the fixed bottom controls */
   #stage { padding: 10px; gap: 10px; }
-  #screens { flex-direction: column; }
-  #screens .screen-card, #screens.multi .screen-card { flex: 1 1 auto; width: 100%; min-height: 220px; }
+  .screens-grid { grid-template-columns: 1fr !important; grid-template-rows: none !important; grid-auto-rows: minmax(220px, 1fr); }
+  .thumbs-row { height: 84px; }
+  .thumbs-row .screen-card { flex-basis: 120px; }
 
   #spatial-wrap { height: 26vh; min-height: 160px; }
   .spatial-label { flex-wrap: wrap; gap: 6px; padding: 6px 10px; }