Merge pull request #8772 from kenjis/fix-toolbar-css

fix: [DebugBar] Toolbar display may be broken

Author: kenjis

admin/css/debug-toolbar/README.md

@@ -0,0 +1 @@
+See [contributing/css.md](../../../contributing/css.md).

admin/css/debug-toolbar/toolbar.scss

@@ -28,8 +28,8 @@
     width: 36px;
 
     // Spacing
-    margin: 0px;
-    padding: 0px;
+    margin: 0;
+    padding: 0;
 
     // Content
     clear: both;
@@ -85,6 +85,8 @@
         display: flex;
         font-weight: normal;
         margin: 0 0 0 auto;
+        padding: 0;
+        font-family: $base-font;
 
         svg {
             width: 16px;

contributing/css.md

@@ -10,7 +10,7 @@ Open your terminal, and navigate to CodeIgniter's root folder. To
 generate the CSS file, use the following command:
 
 ```console
-sass --no-source-map admin/css/debug-toolbar/toolbar.scss system/Debug/Toolbar/Views/toolbar.css`
+sass --no-source-map admin/css/debug-toolbar/toolbar.scss system/Debug/Toolbar/Views/toolbar.css
 ```
 
 Details:

system/Debug/Toolbar/Views/toolbar.css

@@ -13,8 +13,8 @@
   z-index: 10000;
   height: 36px;
   width: 36px;
-  margin: 0px;
-  padding: 0px;
+  margin: 0;
+  padding: 0;
   clear: both;
   text-align: center;
   cursor: pointer;
@@ -52,6 +52,8 @@
   display: flex;
   font-weight: normal;
   margin: 0 0 0 auto;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
 }
 #debug-bar h1 svg {
   width: 16px;