More improvement for toolbar.

inventory/static/css/components/draw.css

@@ -1,9 +1,15 @@
+:root {
+    --tb-h: 34px;
+}
+
 .grid-widget {
     display: flex;
     flex-direction: column;
     height: 100%;
     min-width: 0;
     min-height: 0;
+    position: relative;
+    isolation: isolate;
 }
 
 .grid-widget .grid-wrap {
@@ -13,6 +19,7 @@
     position: relative;
     overflow: hidden;
     min-height: 0;
+    z-index: 0;
 }
 
 .grid-widget [data-grid] {
@@ -23,10 +30,12 @@
     touch-action: none;
     margin: 0 auto;
     max-width: 100%;
+    z-index: 0;
 }
 
 .grid-widget [data-toolbar]::-webkit-scrollbar {
     height: 8px;
+    z-index: 10;
 }
 
 .grid-widget [data-grid-wrap] {
@@ -51,6 +60,9 @@
     box-sizing: border-box;
     margin: 0 auto;
     max-width: 100%;
+    position: relative;
+    z-index: 10;
+    overflow: visible;
 }
 
 .grid-widget [data-dot] {
@@ -60,12 +72,25 @@
 }
 
 .grid-widget .toolbar {
-    display: flex;
-    flex-wrap: nowrap;
-    overflow-x: auto;
-    overflow-y: visible;
+    display: grid;
     gap: .5rem;
+}
+
+.grid-widget .toolbar-row {
+    display: flex;
     align-items: center;
+    gap: .5rem;
+    min-width: 0;
+    flex-wrap: nowrap;
+}
+
+.toolbar-row--primary {
+    overflow-x: auto;
+}
+
+.toolbar-row--secondary {
+    overflow-x: auto;
+    opacity: .95;
 }
 
 .grid-widget .toolbar-range {
@@ -75,10 +100,13 @@
 }
 
 .grid-widget .dropdown-menu {
-    z-index: 2000;
-    min-width: 220px;
+    min-width: 200px;
     padding: .5rem .75rem;
-    border-radius: .5rem;
+    border-radius: .75rem;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
+    position: absolute;
+    z-index: 1000 !important;
+    pointer-events: auto;
 }
 
 .grid-widget .dropdown-menu>*:first-child {
@@ -105,4 +133,82 @@
 
 .grid-widget [data-toolbar] .vr {
     align-self: stretch;
-}
+}
+
+.grid-widget [data-toolbar] .btn-group,
+.grid-widget [data-toolbar] .dropdown,
+.grid-widget [data-toolbar] .vr {
+    flex: 0 0 auto;
+}
+
+.grid-widget .toolbar-group {
+    display: flex;
+    align-items: center;
+    gap: .25rem;
+    padding: .25rem;
+    border: 1px solid rgba(0, 0, 0, .08);
+    border-radius: .5rem;
+    background: rgba(0, 0, 0, .02);
+}
+
+.grid-widget .btn,
+.grid-widget .form-control,
+.grid-widget .badge {
+    height: var(--tb-h);
+}
+
+.grid-widget .toolbar .btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 .5rem;
+}
+
+.grid-widget .toolbar .form-control-color {
+    width: var(--tb-h);
+    padding: 0;
+}
+
+.grid-widget .tb-btn {
+    flex-direction: column;
+    gap: 2px;
+    line-height: 1;
+}
+
+.grid-widget .tb-btn small {
+    font-size: 11px;
+    opacity: .75;
+}
+
+.grid-widget .dropdown-toggle::after {
+    display: none;
+}
+
+.grid-widget .toolbar .btn-group .btn {
+    border-radius: 0;
+}
+
+.grid-widget .toolbar .btn-group .btn:first-child {
+    border-top-left-radius: .5rem;
+    border-bottom-left-radius: .5rem;
+}
+
+.grid-widget .toolbar .btn-group .btn:last-child {
+    border-top-right-radius: .5rem;
+    border-bottom-right-radius: .5rem;
+}
+
+.grid-widget .btn-check:checked+.btn {
+    background: rgba(0, 0, 0, .08);
+    border-color: rgba(0, 0, 0, .18);
+}
+
+.grid-widget [data-toolbar],
+.grid-widget [data-grid] {
+    margin-inline: auto;
+}
+
+.grid-widget [data-toolbar] {
+    max-width: var(--grid-maxw, 100%);
+    width: 100%;
+}