feat: Implement responsive design enhancements with new utility classes and improved layout for various components

2026-05-11 13:31:25 +01:00
parent d2a4ee9f70
commit 59956670df
15 changed files with 236 additions and 31 deletions
@@ -0,0 +1,98 @@
+/* Shared responsive helpers for layout, forms, cards, and viewer surfaces. */
+
+.summary-card {
+    width: 100%;
+    max-width: 22rem;
+}
+
+@media (min-width: 576px) {
+    .summary-card {
+        width: auto;
+        min-width: 17.5rem;
+    }
+}
+
+.form-control-max-300 {
+    width: 100%;
+    max-width: 300px;
+}
+
+.form-control-max-320 {
+    width: 100%;
+    max-width: 320px;
+}
+
+.search-input-compact {
+    width: min(100%, 220px);
+}
+
+.inline-search-row {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    flex-wrap: wrap;
+}
+
+.viewer-frame-setup {
+    box-sizing: border-box;
+    background: #222;
+    width: 100%;
+    max-width: 1600px;
+    height: min(72vh, 800px);
+    min-height: 420px;
+}
+
+.viewer-frame-standard {
+    box-sizing: border-box;
+    background: #222;
+    width: 100%;
+    height: min(68vh, 600px);
+    min-height: 360px;
+}
+
+.viewer-frame-ohif {
+    width: 100%;
+    height: 100%;
+    border: none;
+    padding: 0;
+    min-height: min(70vh, 700px);
+}
+
+.viewer-preupload-shell {
+    position: relative;
+    min-height: clamp(320px, 55vh, 450px);
+}
+
+.viewer-preupload-root {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.modal-wide-md {
+    max-width: min(700px, 96vw);
+}
+
+.modal-wide-xl {
+    max-width: min(1200px, 96vw);
+}
+
+.progress-compact {
+    height: 8px;
+}
+
+.progress-compact-sm {
+    height: 10px;
+}
+
+.flex-max-320 {
+    flex: 1;
+    max-width: 320px;
+}
+
+@media (max-width: 575.98px) {
+    .flex-max-320 {
+        max-width: 100%;
+    }
+}