fix: make responsive behavior of table depend on it's own width

projectcaluma · Nov 15, 2024 · ee58021 · ee58021
1 parent 356446e
commit ee58021
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 3 deletions.
diff --git a/addon/components/document-list.hbs b/addon/components/document-list.hbs
@@ -5,7 +5,7 @@
   <thead>
     <tr>
       {{#each-in @columns as |key settings|}}
-        <th class={{concat (if (eq key "title") "uk-table-expand") (concat "document-list-item-" key)}}>
+        <th class={{concat "uk-text-nowrap" (if (eq key "title") " uk-table-expand") (concat " document-list-item-" key)}}>
           {{#if settings.labelHidden}}
             <span hidden>
               {{t (concat "alexandria.document-list." settings.label)}}

diff --git a/app/styles/_responsive.scss b/app/styles/_responsive.scss
@@ -1,8 +1,11 @@
 .alexandria-container {
   container: alexandria / inline-size;
 }
+.document-view {
+  container: table / inline-size;
+}
 
-@container alexandria (max-width: 1200px) {
+@container alexandria (max-width: 1550px) {
   .document-details {
     width: 300px;
 
@@ -12,7 +15,13 @@
   }
 }
 
-@container alexandria (max-width: 1100px) {
+@container table (max-width: 700px) {
+  .document-list-item-createdByUser {
+    display: none;
+  }
+}
+
+@container table (max-width: 850px) {
   .side-nav > div:first-child {
     font-size: 0;
   }
@@ -48,3 +57,9 @@
     }
   }
 }
+
+@container table (max-width: 900px) {
+  .document-list-item-modifiedAt {
+    display: none;
+  }
+}