fix: Adjust HTML styles for small screens (#67)

Author: AylenHoz

src/public/error_stack/style.css

@@ -24,7 +24,7 @@ html.dark {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 10px 16px;
+  padding: calc(2vw + 7px);
   border-radius: var(--radius) var(--radius) 0 0;
 }
 
@@ -61,17 +61,22 @@ html.dark {
 .stack-frame-contents {
   background: var(--frame-bg);
   display: flex;
-  padding: 0 12px;
+  padding: 0 calc(1vw + 3px);
   align-items: center;
   justify-content: space-between;
 }
+
 .stack-frame:not(.stack-frame-native) .stack-frame-contents:hover {
   background: var(--card-bg);
 }
 .stack-frame:last-child:not(.expanded) .stack-frame-contents {
   border-radius: 0 0 var(--radius) var(--radius);
 }
 
+.stack-frame-filepath {
+  max-width: 100%;
+}
+
 .stack-frame-location {
   display: flex;
   flex-direction: column;
@@ -83,6 +88,7 @@ html.dark {
   color: inherit;
   font: inherit;
   padding: 9px 0;
+  align-items:start;
 }
 
 .stack-frame-location a {
@@ -194,6 +200,14 @@ html.dark {
 }
 
 @media (min-width: 768px) {
+  .stack-frame-contents {
+    padding: 0 12px;
+  }
+
+  #stack-frames-header {
+    padding: 10px 16px;
+  }
+
   .stack-frame-location {
     flex-direction: row;
   }

src/public/error_stack_source/style.css

@@ -30,7 +30,7 @@ html.dark {
   font-size: 12px;
   font-family: var(--font-mono);
   position: relative;
-  padding: 10px 12px 12px 12px;
+  padding: calc(2vw + 4px) calc(2vw + 6px) calc(2vw + 4px) calc(2vw + 6px);
 }
 [class*='shj-lang-'] * {
   -webkit-font-smoothing: initial;
@@ -118,5 +118,6 @@ html.dark {
 @media (min-width: 768px) {
   [class*='shj-lang-'] {
     border-top: none;
+    padding: 10px 12px 12px 12px;
   }
 }

src/public/header/style.css

@@ -6,7 +6,7 @@
 #toggle-theme-container {
   position: relative;
   display: inline-block;
-  padding-right: 10px;
+  padding-right: 0px;
 }
 
 #toggle-theme-container input[type='checkbox'] {
@@ -50,6 +50,7 @@
   #light-theme-indicator {
   display: none;
 }
+
 #toggle-theme-container input[type='checkbox']:checked + #toggle-theme-label #dark-theme-indicator {
   display: flex;
 }

src/public/layout/style.css

@@ -321,6 +321,7 @@ input[type='checkbox']:disabled + span {
 }
 .dumper-dump pre {
   font-size: 13px;
+  padding: calc(0.5vw + 8px);
 }
 .dumper-dump .dumper-toggle span {
   font-size: 12px;
@@ -336,14 +337,14 @@ input[type='checkbox']:disabled + span {
   display: flex;
   flex-direction: column;
   gap: 24px;
-  padding: 40px;
+  padding: calc(1vw + 15px);
 }
 
 .card {
   background: var(--card-bg);
   box-shadow: var(--card-shadow);
   border-radius: var(--radius);
-  padding: 22px 30px;
+  padding: calc(2vw + 7px);
   display: flex;
   flex-direction: column;
   gap: 12px;
@@ -387,7 +388,7 @@ input[type='checkbox']:disabled + span {
 
 .card-table td {
   border-bottom: 1px solid var(--border);
-  padding: 6px 12px;
+  padding: calc(0.8vw + 4px) calc(0.8vw + 8px);
   word-wrap: break-word;
 }
 
@@ -402,9 +403,25 @@ input[type='checkbox']:disabled + span {
 }
 
 @media (min-width: 768px) {
+  #layout {
+    padding: 40px;
+  }
+
+  .card {
+    padding: 22px 30px;
+  }
+
+  .card-table td {
+    padding: 6px 12px;
+  }
+
   .card-table td.table-key {
     width: 180px;
   }
+
+  .dumper-dump pre {
+    padding: 10px 15px;
+  }
 }
 
 @media (min-width: 1024px) {