fix gaps in app

- increase margins on all cards
- no gaps in layouts
- fix negative/positive margin/padding to show shadows but don't
  introduce scrollbars

Author: hexaeder

NetworkDynamicsInspector/assets/app.css

@@ -1,8 +1,16 @@
-html, body {
+html {
+    margin:0px;
+    padding:0px;
+    height: 100%;
+    width:100%;
+}
+body {
     font-family: sans-serif;
     font-size: 12px;
     height: 100%;
-    /* width: 100%; */
+    margin:0px;
+    padding:5px;
+    box-sizing: border-box;
 }
 
 .select2-container .select2-selection .select2-selection__rendered,
@@ -21,18 +29,31 @@ html, body {
     display: grid;
     grid-template-columns: min-content auto;
     width: 100%;
-    gap: 5px;
+    gap: 0px;
+}
+
+/* to keep shadows visible  at overflow hidden*/
+/* https://stackoverflow.com/questions/70802682/parents-overflowhidden-doesnt-show-childs-box-shadow */
+/* to the sides we only go +- 5 px (padding of body)*/
+.graphplot-col{
+    overflow: hidden; /* otherwise axis won't shrink */
+    margin:-10px -10px -10px -5px; /* t r b l */
+    padding:10px  10px  10px  5px;
+}
+.timeseries-col{
+    overflow: hidden; /* otherwise axis won't shrink */
+    margin:-10px -5px -10px -10px; /* t r b l */
+    padding:10px  5px  10px  10px;
 }
 
 .graphplot-col, .timeseries-col, .timeseries-stack{
     display: flex;
     flex-direction: column;
-    gap: 5px;
-    /* to keep shadows visible */
-    /* https://stackoverflow.com/questions/70802682/parents-overflowhidden-doesnt-show-childs-box-shadow */
-    overflow: hidden; /* otherwise it won't shrink */
-    margin:-10px;
-    padding:10px
+    gap: 0px;
+}
+
+.bonito-card {
+    margin: 5px !important;
 }
 
 .graphplot-card {

NetworkDynamicsInspector/src/NetworkDynamicsInspector.jl

@@ -440,7 +440,7 @@ function timeslider_card(app)
             justify_content="begin",
             align_items="center",
         );
-        class="timeslider-card"
+        class="bonito-card timeslider-card"
     );
 end
 
@@ -478,7 +478,7 @@ function element_info_card(app, session)
 
     Card(
         DOM.div(;id="element-info-box");
-        class="element-info-card resize-with-gp"
+        class="bonito-card element-info-card resize-with-gp"
     )
 end
 

NetworkDynamicsInspector/src/graphplot.jl

@@ -212,7 +212,7 @@ function graphplot_card(app, session)
     register_interaction!(ax, :edgeclick, ech)
     register_interaction!(ax, :edgehover, ehh)
 
-    Card(fig; class="graphplot-card")
+    Card(fig; class="bonito-card graphplot-card")
 end
 function _gracefully_extract_states!(vec, sol, t, idxs, rel)
     isvalid(s) = SII.is_variable(sol, s) || SII.is_parameter(sol, s) || SII.is_observed(sol, s)
@@ -272,7 +272,7 @@ function gpstate_control_card(app, type)
     colorrange = type == :vertex ? app.graphplot.ncolorrange : app.graphplot.ecolorrange
     colorscheme = type == :vertex ? app.graphplot.ncolorscheme : app.graphplot.ecolorscheme
     class = type == :vertex ? "gpstate-control-card vertex" : "gpstate-control-card edge"
-    class *= " resize-with-gp"
+    class *= " resize-with-gp bonito-card"
 
     ####
     #### State selection

NetworkDynamicsInspector/src/timeseries.jl

@@ -322,7 +322,7 @@ function timeseries_card(app, key, session)
     end
     register_interaction!(set_time_interaction, ax, :set_time)
 
-    cardclass = "timeseries-card"
+    cardclass = "bonito-card timeseries-card"
     if key == app.active_tsplot[]
         cardclass *= " active-tseries"
     end