Fix save-button position (#391)

* group buttons in section - add css * move flex-wrap to breakpoint at 1200px for control-bar-section * align-items controlbar end (bottom)
statisticsnorway · Aug 13, 2024 · cbda9ea · cbda9ea
1 parent 58187f1
commit cbda9ea
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 13 deletions.
diff --git a/src/datadoc/assets/controlbar_style.css b/src/datadoc/assets/controlbar_style.css
@@ -1,15 +1,13 @@
 .control-bar-section{
     display: flex;
-    flex-wrap: wrap;
-    gap: 1rem;
+    gap: 0.5rem;
     padding: 1rem 0;
-    align-items: center;
+    align-items: end;
     margin-top: 1rem;
 }
 
 .ssb-input.file-path-input{
     max-width: 1100px;
-    width: 100%;
 }
 
 .ssb-btn.secondary-btn.file-open-button,.ssb-btn.secondary-btn.file-save-button{
@@ -107,3 +105,14 @@
   margin: 0;
   margin-top: 1rem;
 }
+
+.button-section{
+  display: flex;
+  gap: 0.5rem;
+}
+
+@media only screen and (max-width: 1200px) {
+  .control-bar-section{
+    flex-wrap: wrap;
+  }
+}
diff --git a/src/datadoc/frontend/components/control_bars.py b/src/datadoc/frontend/components/control_bars.py
@@ -49,15 +49,20 @@ def build_controls_bar() -> html.Section:
                 className="file-path-input",
                 id="dataset-path-input",
             ),
-            ssb.Button(
-                children=["Åpne fil"],
-                id="open-button",
-                className="file-open-button",
-            ),
-            ssb.Button(
-                children=["Lagre metadata"],
-                id="save-button",
-                className="file-save-button",
+            html.Section(
+                [
+                    ssb.Button(
+                        children=["Åpne fil"],
+                        id="open-button",
+                        className="file-open-button",
+                    ),
+                    ssb.Button(
+                        children=["Lagre metadata"],
+                        id="save-button",
+                        className="file-save-button",
+                    ),
+                ],
+                className="button-section",
             ),
         ],
         className="control-bar-section",