typescript

frontend/src/styles/documents/listing.css

@@ -61,11 +61,21 @@
   gap: 0.5rem;
 }
 
+.panel-floating-region {
+  position: sticky;
+  top: 0.5rem;
+  display: flex;
+  justify-content: center;
+  pointer-events: none;
+  z-index: 6;
+  height: 0;
+}
+
 .panel-floating {
   position: absolute;
-  top: calc(50% + 0.25rem);
+  top: 0;
   left: 50%;
-  transform: translate(-50%, -50%);
+  transform: translate(-50%, -45%);
   background: color-mix(in oklch, var(--surface) 100%, transparent);
   border: 1px solid color-mix(in oklch, var(--border) 95%, transparent);
   padding: 0.45rem 0.85rem;
@@ -73,14 +83,28 @@
   font-size: 0.95rem;
   font-weight: 400;
   color: var(--fg);
-  box-shadow: 0 2px 6px color-mix(in oklch, var(--shadow-soft) 60%, transparent);
+  box-shadow: 0 6px 24px color-mix(in oklch, var(--shadow-soft) 55%, transparent);
   pointer-events: auto;
-  display: flex;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
-  flex-wrap: nowrap;
+  flex-wrap: wrap;
   gap: 0.75rem;
   z-index: 950000;
+  width: auto;
+  margin: 0 auto;
+}
+
+.panel-floating__buttons {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  order: 2;
+  pointer-events: auto;
+}
+
+.panel-floating__label {
+  order: 0;
 }
 
 .panel-floating__label {
@@ -128,6 +152,15 @@
   pointer-events: auto;
 }
 
+.panel-floating-actions--assignments {
+  display: flex;
+  order: 1;
+  flex-wrap: nowrap;
+  width: auto;
+  white-space: nowrap;
+  justify-content: center;
+}
+
 .panel-floating-actions .quick-add {
   pointer-events: auto;
 }
@@ -155,6 +188,53 @@
   height: 1.35rem;
 }
 
+@media (max-width: 960px) {
+  .panel-floating {
+    justify-content: center;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .panel-floating__label {
+    order: 0;
+    flex: 1 1 auto;
+    text-align: left;
+  }
+
+  .panel-floating__buttons {
+    order: 1;
+    flex: 0 0 auto;
+    justify-content: flex-end;
+  }
+
+  .panel-floating-actions--assignments {
+    order: 2;
+    width: 100%;
+    justify-content: center;
+  }
+
+  .panel-floating-actions__button {
+    font-size: 1.15rem;
+  }
+}
+
+@media (max-width: 640px) {
+  .panel-floating {
+    gap: 0.5rem;
+    border-radius: 0.85rem;
+    padding: 0.4rem 0.65rem;
+  }
+
+  .panel-floating-actions {
+    gap: 0.35rem;
+  }
+
+  .panel-floating-actions__button .icon-inline {
+    width: 1.1rem;
+    height: 1.1rem;
+  }
+}
+
 .documents-panel .documents-scroll {
   overflow-y: auto;
   background: transparent;