ui: devtools

app/react-components/devtools.jsx

@@ -24,21 +24,22 @@ export default function Devtools({
         </TabList>
 
         <TabPanel>
-          <form>
-            <div className={styles.engineBar}>
-              <label>
-                Apply filters
-                <input
-                  checked={applyFilters}
-                  onChange={() => {
-                    setApplyFilters(!applyFilters);
-                  }}
-                  type="checkbox"
-                />
-              </label>
-            </div>
-          </form>
-
+          <div className={styles.dashboard}>
+            <form>
+              <div className={styles.engineBar}>
+                <label>
+                  <span>Apply filters</span>
+                  <input
+                    checked={applyFilters}
+                    onChange={() => {
+                      setApplyFilters(!applyFilters);
+                    }}
+                    type="checkbox"
+                  />
+                </label>
+              </div>
+            </form>
+          </div>
         </TabPanel>
 
         <TabPanel>

app/react-components/devtools.module.css

@@ -9,15 +9,41 @@
   color: white;
   height: 100%;
   overflow: hidden;
-  padding: 16px;
   width: 100%;
 }
 
+.devtools form {
+  label {
+    font-weight: bold;
+    :first-child {
+      margin-right: 4px;
+    }
+  }
+  input, select, option {
+    background-color: #333333;
+    color: #ffffff;
+  }
+}
+
 .devtools > :global(.react-tabs) {
   display: flex;
   flex-direction: column;
   height: 100%;
+  > :global(.react-tabs__tab-list) {
+    margin-bottom: 0;
+  }
   > :global(.react-tabs__tab-panel) {
     overflow-y: auto;
   }
-}
+  :global(.react-tabs__tab--selected) {
+    background-color: #00000022;
+    color: #ffffff;
+  }
+  :global(.react-tabs__tab:focus:after) {
+    background-color: #00000044;
+  }
+}
+
+.dashboard {
+  margin: 16px;
+}

app/react-components/devtools/tiles.jsx

@@ -35,7 +35,7 @@ export default function Tiles({
         <div className={styles.paintBar}>
           <div className={styles.layer}>
             <label>
-              Layer:
+              <span>Layer</span>
               <select
                 onChange={(event) => {
                   setLayer(event.target.value)
@@ -58,7 +58,7 @@ export default function Tiles({
           </div>
           <div className={styles.brush}>
             <label>
-              Brush:
+              <span>Brush</span>
               <select
                 onChange={(event) => {
                   setBrush(event.target.value)
@@ -76,14 +76,18 @@ export default function Tiles({
         onMouseDown={(event) => {
           const wrapperRect = wrapperRef.current.getBoundingClientRect();
           const {left, top} = wrapperRect;
+          const c = {
+            x: event.clientX,
+            y: event.clientY + wrapperRef.current.scrollTop,
+          };
           if (
-            event.clientX - left >= (w * factor)
-            || event.clientY - top >= (h * factor)
+            c.x - left >= (w * factor)
+            || c.y - top >= (h * factor)
           ) {
             return;
           }
-          const x = Math.floor((event.clientX - left) / (tileSize.x * factor));
-          const y = Math.floor((event.clientY - top) / (tileSize.y * factor));
+          const x = Math.floor((c.x - left) / (tileSize.x * factor));
+          const y = Math.floor((c.y - top) / (tileSize.y * factor));
           setMoveStart({x, y});
           setSelection({x, y, w: 1, h: 1});
         }}
@@ -94,11 +98,15 @@ export default function Tiles({
           const {x: sx, y: sy} = moveStart;
           const wrapperRect = wrapperRef.current.getBoundingClientRect();
           const {left, top} = wrapperRect;
+          const c = {
+            x: event.clientX,
+            y: event.clientY + wrapperRef.current.scrollTop,
+          };
           const x = Math.floor(
-            Math.max(0, Math.min((w * factor) - 1, (event.clientX - left)) / (tileSize.x * factor)),
+            Math.max(0, Math.min((w * factor) - 1, (c.x - left)) / (tileSize.x * factor)),
           );
           const y = Math.floor(
-            Math.max(0, Math.min((h * factor) - 1, (event.clientY - top)) / (tileSize.y * factor)),
+            Math.max(0, Math.min((h * factor) - 1, (c.y - top)) / (tileSize.y * factor)),
           );
           const mx = Math.min(sx, x);
           const my = Math.min(sy, y);

app/react-components/devtools/tiles.module.css

@@ -1,10 +1,21 @@
+.tiles {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+}
+
 .paintBar {
   display: flex;
   gap: 16px;
-  margin: 16px 0;
+  margin: 16px;
+  margin-bottom: 0;
 }
 
 .selectionWrapper {
+  margin: 16px;
+  margin-right: 0;
+  overflow-y: auto;
+  padding-right: 16px;
   position: relative;
 }