fixing overall font size and layouts

Author: deeppatel234

packages/devtool-extenstion/src/components/DiffView/index.scss

@@ -4,10 +4,10 @@
   padding: 1rem 0.3rem;
 
   .jsondiffpatch-delta {
-    font-size: 1rem;
+    font-size: 0.85rem;
 
     pre {
-      font-size: 1rem;
+      font-size: 0.85rem;
     }
   }
 

packages/devtool-extenstion/src/components/JsonEditor/index.scss

@@ -1,7 +1,7 @@
 .json-editor {
   flex: 1;
   overflow: auto;
-  font-size: 1rem;
+  font-size: 0.85rem;
   height: 100%;
 
   .CodeMirror {

packages/devtool-extenstion/src/components/JsonTree/index.scss

@@ -6,11 +6,11 @@
     overflow: auto;
     background-color: var(--view-bg-color) !important;
     padding: 1rem;
-    font-size: 1rem;
+    font-size: 0.8rem;
 
     .copy-icon {
       svg {
-        font-size: 1rem !important;
+        font-size: 0.8rem !important;
       }
     }
   }

packages/devtool-extenstion/src/containers/ContextView/index.scss

@@ -8,14 +8,14 @@
     position: relative;
     display: flex;
     align-items: center;
-    padding: 2rem 1rem 0 1rem;
+    padding: 1.6rem 1rem 0 1rem;
     justify-content: space-between;
     border-bottom: 1px solid var(--border-color);
 
     .view-selector {
       position: absolute;
       right: 1rem;
-      bottom: 0.8rem;
+      bottom: 0.7rem;
     }
   }
 

packages/devtool-extenstion/src/containers/Header/index.scss

@@ -3,6 +3,6 @@ header {
   background-color: var(--header-bg-color);
   border-bottom: 1px solid var(--border-color);
   display: flex;
-  font-size: 1rem;
-  padding: 1rem;
+  font-size: 0.9rem;
+  padding: 0.7rem 1rem;
 }

packages/devtool-extenstion/src/containers/Sidebar/index.scss

@@ -1,3 +1,9 @@
+#firefox.popupHtml, #firefox.devpanelHtml {
+  aside {
+    width: 190px;
+  }
+}
+
 aside {
   display: flex;
   flex-direction: column;
@@ -9,7 +15,7 @@ aside {
     align-items: center;
     border-bottom: 1px solid var(--border-color);
     display: flex;
-    padding: 1.5rem 0.7rem;
+    padding: 1rem 0.7rem;
 
     .funnel {
       color: var(--disabled-font-color);
@@ -29,7 +35,7 @@ aside {
     li {
       border-bottom: 1px solid var(--border-color);
       cursor: pointer;
-      font-size: 0.9rem;
+      font-size: 0.85rem;
       padding: 1rem 1rem 1.5rem;
       position: relative;
       word-break: break-all;

packages/devtool-extenstion/src/containers/UseReducerView/index.scss

@@ -1,8 +1,8 @@
 #popupRoot {
   .use-reducer-view {
     .action-view {
-      min-width: 180px;
-      max-width: 180px;
+      min-width: 170px;
+      max-width: 170px;
     }
 
     .state-view {
@@ -11,6 +11,15 @@
   }
 }
 
+#firefox.popupHtml, #firefox.devpanelHtml {
+  .use-reducer-view {
+    .action-view {
+      min-width: 170px;
+      max-width: 170px;
+    }
+  }
+}
+
 .use-reducer-view-wrapper {
   display: flex;
   flex-direction: column;
@@ -31,10 +40,10 @@
     border-right: 1px solid var(--border-color);
 
     .title {
-      font-size: 1.45rem;
+      font-size: 1.3rem;
       border-bottom: 1px solid var(--border-color);
       margin: 0;
-      padding: 1.2rem 1rem;
+      padding: 1.1rem;
     }
 
     ul {
@@ -83,14 +92,14 @@
       position: relative;
       display: flex;
       align-items: center;
-      padding: 2rem 1rem 0 1rem;
+      padding: 1.6rem 1rem 0 1rem;
       justify-content: space-between;
       border-bottom: 1px solid var(--border-color);
 
       .view-selector {
         position: absolute;
         right: 1rem;
-        bottom: 0.8rem;
+        bottom: 0.7rem;
       }
     }