diff --git a/inventory/static/css/components/draw.css b/inventory/static/css/components/draw.css
index a0cee01..12cfe38 100644
--- a/inventory/static/css/components/draw.css
+++ b/inventory/static/css/components/draw.css
@@ -3,13 +3,55 @@
}
.grid-widget {
+ container-type: inline-size;
+ min-width: 375px;
+}
+
+.grid-widget [data-toolbar].toolbar {
+ display: grid !important;
+ grid-template-rows: auto auto;
+ align-content: start;
+ gap: .5rem;
+ overflow: visible;
+}
+
+.grid-widget [data-toolbar] .toolbar-row {
display: flex;
- flex-direction: column;
- height: 100%;
+ align-items: center;
+ gap: .5rem;
min-width: 0;
- min-height: 0;
- position: relative;
- isolation: isolate;
+ flex-wrap: nowrap;
+}
+
+.grid-widget [data-toolbar] .toolbar-row--primary,
+.grid-widget [data-toolbar] .toolbar-row--secondary {
+ overflow-x: auto;
+ overflow-y: hidden;
+}
+
+.grid-widget [data-toolbar] .toolbar-row--secondary {
+ opacity: .95;
+}
+
+/* WIDE: 1 row */
+@container (min-width: 725px){
+ .grid-widget [data-toolbar].toolbar{
+ display: flex !important;
+ flex-wrap: nowrap;
+ align-items: center;
+ gap: .5rem;
+ overflow-x: auto;
+ overflow-y: hidden;
+ }
+
+ .grid-widget [data-toolbar] .toolbar-row{
+ display: contents;
+ }
+
+ .grid-widget [data-toolbar] .toolbar-row--primary,
+ .grid-widget [data-toolbar] .toolbar-row--secondary{
+ overflow: visible;
+ }
}
.grid-widget .grid-wrap {
@@ -54,45 +96,12 @@
inset: 0;
}
-.grid-widget [data-toolbar] {
- flex: 0 0 auto;
- width: min(100%, var(--grid-maxw, 100%));
- box-sizing: border-box;
- margin: 0 auto;
- max-width: 100%;
- position: relative;
- z-index: 10;
- overflow: visible;
-}
-
.grid-widget [data-dot] {
transform: translate(-50%, -50%);
z-index: 2;
pointer-events: none;
}
-.grid-widget .toolbar {
- 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 {
width: 120px;
margin: 0;
@@ -211,4 +220,4 @@
.grid-widget [data-toolbar] {
max-width: var(--grid-maxw, 100%);
width: 100%;
-}
+}
\ No newline at end of file
diff --git a/inventory/static/js/components/draw.js b/inventory/static/js/components/draw.js
index f6cf1c1..db7e514 100644
--- a/inventory/static/js/components/draw.js
+++ b/inventory/static/js/components/draw.js
@@ -42,7 +42,7 @@ function initGridWidget(root, opts = {}) {
if (cellSizeEl && cellSizeValEl) bindRangeWithLabel(cellSizeEl, cellSizeValEl, v => `${v}px`);
if (fillOpacityEl && fillValEl) bindRangeWithLabel(fillOpacityEl, fillValEl, v => `${parseInt(Number(v) * 100)}%`);
if (strokeOpacityEl && strokeValEl) bindRangeWithLabel(strokeOpacityEl, strokeValEl, v => `${parseInt(Number(v) * 100)}%`);
- if (strokeWidthEl && widthValEl) bindRangeWithLabel(strokeWidthEl, widthValEl, v => `${parseInt(Number(v) * cellSizeEl.value)}p×`);
+ if (strokeWidthEl && widthValEl) bindRangeWithLabel(strokeWidthEl, widthValEl, v => `${Math.round(Number(v) * Number(cellSizeEl.value || 0))}px`);
const storageKey = opts.storageKey ?? 'gridDoc';
diff --git a/inventory/templates/components/draw.html b/inventory/templates/components/draw.html
index fefc903..b916248 100644
--- a/inventory/templates/components/draw.html
+++ b/inventory/templates/components/draw.html
@@ -160,7 +160,7 @@
- 25px
+ 25px