spacing

skrub-data · Jan 11, 2024 · f0a05a1 · f0a05a1
1 parent cbd2360
commit f0a05a1
Showing 1 changed file with 16 additions and 7 deletions.
diff --git a/src/skrubview/_data/templates/dataframe-columns.css b/src/skrubview/_data/templates/dataframe-columns.css
@@ -6,32 +6,41 @@
 }
 
 {{ report_id_selector }}.skrubview-report .skrubview-column-summary-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--skrubview-small);
+    padding-block-start: var(--skrubview-tiny);
+    padding-block-end: var(--skrubview-tiny);
+    padding-inline-end: var(--skrubview-small);
     min-width: min-content;
     max-width: max-content;
 }
 
+{{ report_id_selector }}.skrubview-report .skrubview-column-summary-group > * {
+    margin: 0;
+}
+
 {{ report_id_selector }}.skrubview-report .skrubview-column-summary-content {
     display: flex;
     flex-wrap: wrap;
     column-gap: var(--skrubview-tiny);
 }
 
-#{{ compact_id }} {
+:is(#{{ compact_id }}, #{{ compact_id }} + label ){
     display: none;
 }
 
-#{{ compact_id }} + label {
-    display: none;
-}
-
-@media screen and (min-width: 70rem) {
+@media screen and (min-width: 60rem) {
     {{ report_id_selector }}.skrubview-report #{{ compact_id }}:checked ~ .skrubview-column-summary-group {
         display: flex;
+        flex-direction: row;
         flex-wrap: wrap;
+        gap: var(--skrubview-small);
     }
 
     {{ report_id_selector }}.skrubview-report #{{ compact_id }}:checked ~ * .skrubview-column-summary-content {
-        display: block;
+        display: flex;
+        flex-direction: column;
     }
 
     :is(#{{ compact_id }}, #{{ compact_id }} + label ) {