Merge pull request #47 from mlexchange/center-layout

Center layout
mlexchange · Jul 19, 2023 · 3d1939a · 3d1939a
2 parents 414c432 + 02ade52
commit 3d1939a
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 5 deletions.
diff --git a/assets/style.css b/assets/style.css
@@ -6,4 +6,8 @@
 .blue>.blue-icon,
 .yellow>.yellow-icon {
     border: 3px solid black;
+}
+
+.mantine-Grid-col > .mantine-1avyp1d {
+    margin: auto;
 }
diff --git a/callbacks/image_viewer.py b/callbacks/image_viewer.py
@@ -35,8 +35,6 @@ def render_image(
         xaxis=dict(visible=False),
         yaxis=dict(visible=False),
         dragmode="drawopenpath",
-        height=620,
-        width=620,
         paper_bgcolor="rgba(0,0,0,0)",
         plot_bgcolor="rgba(0,0,0,0)",
     )

diff --git a/components/control_bar.py b/components/control_bar.py
@@ -4,7 +4,7 @@
 from utils import data_utils
 
 COMPONENT_STYLE = {
-    "width": "25vw",
+    "width": "400px",
     "height": "calc(100vh - 40px)",
     "padding": "10px",
     "borderRadius": "5px",

diff --git a/components/image_viewer.py b/components/image_viewer.py
@@ -4,7 +4,7 @@
 from utils.plot_utils import blank_fig
 
 COMPONENT_STYLE = {
-    "width": "640px",
+    "width": "calc(-440px + 100vw)",
     "height": "calc(100vh - 40px)",
     "padding": "10px",
     "borderRadius": "5px",
@@ -88,9 +88,13 @@ def layout():
                 ),
                 children=[
                     dcc.Graph(
-                        id="image-viewer", config=FIGURE_CONFIG, figure=blank_fig()
+                        id="image-viewer",
+                        config=FIGURE_CONFIG,
+                        figure=blank_fig(),
+                        style={"margin": "auto", "height": "calc(-150px + 100vh)"},
                     ),
                 ],
+                style={"display": "flex"},
             ),
         ],
     )