update styles and ui-chrome

app/styles.css

@@ -58,6 +58,34 @@
       line-height: 1;
       flex: 0 0 auto;
     }
+    .topbar-panel-toggle {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      padding: 7px 12px;
+      border-radius: 999px;
+      border: 1px solid #3f3f46;
+      background: #27272a;
+      color: #f4f4f5;
+      cursor: pointer;
+      font-size: 13px;
+      font-weight: 600;
+      line-height: 1;
+      flex: 0 0 auto;
+      margin-left: auto;
+    }
+    .topbar-panel-toggle:hover {
+      background: #3f3f46;
+    }
+    .topbar-panel-toggle[hidden] {
+      display: none;
+    }
+    .topbar-panel-toggle[hidden] + .topbar-menu-toggle {
+      margin-left: auto;
+    }
+    .topbar-panel-toggle:not([hidden]) + .topbar-menu-toggle {
+      margin-left: 0;
+    }
     .topbar-menu-toggle:hover {
       background: #3f3f46;
     }
@@ -158,7 +186,9 @@
       }
       .topbar-menu-toggle {
         min-height: 38px;
-        margin-left: auto;
+      }
+      .topbar-panel-toggle {
+        min-height: 38px;
       }
       .topbar.is-menu-open {
         flex-wrap: nowrap;
@@ -2123,13 +2153,6 @@
       pointer-events: auto;
     }
 
-    .sidebar-popout-open {
-      position: absolute;
-      top: 10px;
-      right: 10px;
-      z-index: 5;
-    }
-
     .detail-popout-open {
       position: absolute;
       top: 10px;
@@ -5960,7 +5983,6 @@
         min-height: 38px;
         padding: 8px 10px;
       }
-      .sidebar-popout-open,
       .detail-popout-open {
         position: fixed;
         top: auto;
@@ -5976,9 +5998,6 @@
         -webkit-backdrop-filter: blur(10px);
         backdrop-filter: blur(10px);
       }
-      .sidebar-popout-open {
-        right: 14px;
-      }
       .detail-popout-open {
         left: 14px;
       }