Improve control layout

aiidalab · Dec 22, 2024 · 21843ac · 21843ac
1 parent 168da67
commit 21843ac
Showing 1 changed file with 18 additions and 14 deletions.
diff --git a/home/code_setup.py b/home/code_setup.py
@@ -8,8 +8,8 @@
 CONFIG = {
     "column_widths": {
         "Full Label": "25%",
-        "Executable Path": "70%",
-        "Hide": "5%",
+        "Executable Path": "65%",
+        "Hide": "10%",
     },
     "cell_style": {"padding": "2px 5px"},
     "rows_per_page": 10,
@@ -199,39 +199,43 @@ def render_table_with_filters():
 
     table_output = ipw.Output()
 
+    search_box = ipw.Text(
+        description="Search:",
+        placeholder="Filter by label or path...",
+        layout=ipw.Layout(width="50%"),
+        style={"description_width": "initial"},
+    )
+    search_box.observe(
+        on_search_change,
+        "value",
+    )
+
     show_hidden_only_button = ipw.Checkbox(
         value=False,
+        indent=False,
         description="Show hidden codes only",
+        layout=ipw.Layout(width="fit-content", flex="1", margin="2px 10px"),
     )
     show_hidden_only_button.observe(
         on_show_hidden_click,
         "value",
     )
 
     show_all_button = ipw.Button(
-        description="Show All",
+        description="Unhide All",
         tooltip="Unhide all hidden codes",
         button_style="primary",
-        layout=ipw.Layout(margin="0 0 0 auto"),
+        layout=ipw.Layout(margin="0", width="105px"),
     )
     show_all_button.on_click(on_show_all_click)
 
-    search_box = ipw.Text(
-        description="Search:",
-        placeholder="Filter by label or path...",
-        layout=ipw.Layout(width="50%"),
-    )
-    search_box.observe(
-        on_search_change,
-        "value",
-    )
-
     filters = ipw.HBox(
         children=[
             search_box,
             show_hidden_only_button,
             show_all_button,
         ],
+        layout=ipw.Layout(padding="0 8px", align_items="center"),
     )
 
     pagination = ipw.HBox(layout=ipw.Layout(justify_content="center"))