ui: fix button placement on medium size screens

digital-blueprint · Dec 13, 2024 · 06f9b1e · 06f9b1e
1 parent f7bc38a
commit 06f9b1e
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 12 deletions.
diff --git a/src/dbp-show-requests.js b/src/dbp-show-requests.js
@@ -598,6 +598,12 @@ class ShowRequests extends ScopedElementsMixin(DBPDispatchLitElement) {
                 font-size: 1rem;
             }
 
+            .edit-selection-buttons {
+                display: flex;
+                gap: 1em;
+                margin-left: 1em;
+            }
+
             .edit-items {
                 font-size: 1.6rem;
             }
@@ -629,7 +635,6 @@ class ShowRequests extends ScopedElementsMixin(DBPDispatchLitElement) {
             }
 
             .sender-data {
-                /*margin: 0.5em 0 0.5em 16px;*/
                 margin: 0 0 0.5em 1px;
                 line-height: 1.5;
             }
@@ -644,16 +649,45 @@ class ShowRequests extends ScopedElementsMixin(DBPDispatchLitElement) {
                 font-size: 1.3em;
             }
 
-            @media only screen and (orientation: portrait) and (max-width: 768px) {
+            @media only screen and (max-width: 1150px) {
+                .table-wrapper {
+                    flex-direction: column;
+                    gap: 1em;
+
+                }
+
+                .selected-buttons,
+                .filter-buttons {
+                    width: 100%;
+                }
+
+                #extendable-searchbar {
+                    width: 100%;
+                }
+
                 .edit-selection-buttons {
-                    display: flex;
-                    gap: 5px;
+                    margin-left: 0;
                     width: 100%;
                 }
 
-                #expand-all-btn,
-                #collapse-all-btn {
-                    padding: 0;
+                .edit-selection-buttons dbp-loading-button {
+                    flex-grow: 1;
+                    flex-shrink: 1;
+                    /* flex-basis: 25%; */
+                }
+            }
+
+            @media only screen and (max-width: 800px) {
+                .edit-selection-buttons {
+                    gap: 6px;
+                }
+            }
+
+            @media only screen and (orientation: portrait) and (max-width: 768px) {
+                .edit-selection-buttons {
+                    display: flex;
+                    gap: 1em;
+                    width: 100%;
                 }
 
                 #searchbar {

diff --git a/src/styles.js b/src/styles.js
@@ -902,11 +902,6 @@ export function getDispatchRequestStyles() {
             flex-direction: row;
         }
 
-        #expand-all-btn,
-        #collapse-all-btn {
-            padding: 0.25em 0 0 0.5em;
-        }
-
         .card {
             display: grid;
             grid-template-columns: 4fr min-content;