Redo materia fill popout so that it isn't too wide on mobile, fix a b…

…ug (#407)

![image](https://github.com/user-attachments/assets/82198d36-a63c-4d2f-8283-2e00ef22ef00)

![image](https://github.com/user-attachments/assets/c03eedf7-69c3-43b7-896c-d8fd9ef284d1)

Fixes #404

packages/common-ui/styles/common.less

@@ -1950,7 +1950,7 @@ div.gear-set-editor-toolbar, set-view-toolbar {
           position: relative;
           // These need to not be the real drag target
           pointer-events: none;
-          padding: 1px;
+          padding: 4px;
           width: 25px;
           text-align: center;
 

packages/frontend/src/scripts/components/gear_edit_toolbar.ts

@@ -79,8 +79,8 @@ export class ToolbarButtonsArea extends HTMLDivElement {
         });
         this.popoutArea.addEventListener('mousedown', evStop);
         this.popoutArea.addEventListener('mouseup', evStop);
-        this.popoutArea.addEventListener('pointerdown', evStop);
-        this.popoutArea.addEventListener('pointerup', evStop);
+        // this.popoutArea.addEventListener('pointerdown', evStop);
+        // this.popoutArea.addEventListener('pointerup', evStop);
         this.replaceChildren(this.undoButton, this.redoButton);
     }
 
@@ -106,9 +106,6 @@ export class ToolbarButtonsArea extends HTMLDivElement {
         const button = makeActionButton(label, (ev) => {
             outer.setActivePopout(button, popoutElement);
         });
-        button.addEventListener('pointerdown', ev => {
-            console.log(ev);
-        });
         button.classList.add('popout-button');
         this.appendChild(button);
         this.panelButtons.push(button);

packages/frontend/src/scripts/components/materia.ts

@@ -22,7 +22,7 @@ import {
 } from "@xivgear/common-ui/components/util";
 import {GearPlanSheet} from "@xivgear/core/sheet";
 import {recordCurrentSheetEvent, recordEvent} from "@xivgear/core/analytics/analytics";
-import { GearPlanSheetGui } from "./sheet";
+import {GearPlanSheetGui} from "./sheet";
 
 /**
  * Component for managing all materia slots on an item
@@ -424,8 +424,10 @@ export class MateriaPriorityPicker extends HTMLElement {
         minGcdInput.pattern = '\\d\\.\\d\\d?';
         minGcdInput.title = 'Enter the minimum desired GCD in the form x.yz.\nSkS/SpS materia will be de-prioritized once this target GCD is met.';
         minGcdInput.classList.add('min-gcd-input');
-        this.replaceChildren(header, drag, minGcdText, minGcdInput, document.createElement('br'),
-            solveMelds, fillEmptyNow, fillAllNow, fillModeLabel, fillModeDropdown);
+        this.replaceChildren(header, drag, document.createElement('br'),
+            minGcdText, minGcdInput, document.createElement('br'),
+            fillModeLabel, fillModeDropdown, document.createElement('br'),
+            solveMelds, fillEmptyNow, fillAllNow);
     }
 }