Improve styling and responsiveness

electrikmilk · Apr 27, 2024 · d3def64 · d3def64
1 parent 80899aa
commit d3def64
Showing 1 changed file with 12 additions and 9 deletions.
diff --git a/src/style.css b/src/style.css
@@ -142,7 +142,7 @@
 }
 
 .sp-preview .sp-sub-container {
-    padding-left: 2rem;
+    padding-left: 1rem;
 }
 
 .sp-preview .sp-header {
@@ -237,25 +237,26 @@
 .sp-container .list .item-after {
     white-space: pre-wrap !important;
     text-align: left !important;
+    flex-wrap: wrap !important;
+    flex-shrink: 1;
 }
 
 .sp-container .sp-output-action .sp-output-surface-behavior {
     text-align: left;
     font-weight: bold;
     color: #808080;
     margin: 0 16px;
-    font-size: 0.9rem;
 }
 
 .sp-container .sp-output-action .sp-action-icon i {
     transform: rotate(180deg);
 }
 
-.sp-container .item-title {
-    font-size: 0.9rem;
-}
-
-.sp-container .sp-action-title {
+.sp-container .sp-action-title,
+.sp-container .sp-output-action .sp-output-surface-behavior,
+.sp-container .item-title,
+.sp-container .sp-value,
+.sp-container table th {
     font-size: 0.9rem;
 }
 
@@ -295,7 +296,9 @@
 
 .sp-container .sp-value {
     background: #f2f7ff;
-    font-size: 0.9rem;
+    display: flex;
+    flex-wrap: wrap;
+    word-break: break-word;
     white-space: pre-wrap !important;
     text-align: left !important;
 }
@@ -349,6 +352,7 @@
     color: inherit;
     font-weight: normal;
     padding: 0;
+    display: block;
 }
 
 .sp-container .toggle {
@@ -409,7 +413,6 @@
 
 .sp-container table th {
     font-weight: normal;
-    font-size: 0.9rem;
 }
 
 .sp-container table th:not(:first-child) {