Changed for gride and guidelines

src/taskpane/components/App.tsx

@@ -198,7 +198,7 @@ const App: React.FC<AppProps> = () => {
         
         <div className={styles.section}>
           <Subtitle1 block className={styles.sectionTitle}>
-            Grid & Guidelines
+            Layout
           </Subtitle1>
           <GridGuidelineManager />
         </div>

src/taskpane/components/GridGuidelineManager.tsx

@@ -49,7 +49,14 @@ const useStyles = makeStyles({
     marginBottom: "0"
   },
   controlInput: {
-    flex: 1
+    flex: 1,
+    "& input[type=number]::-webkit-inner-spin-button, & input[type=number]::-webkit-outer-spin-button": {
+      "-webkit-appearance": "none",
+      margin: 0
+    },
+    "& input[type=number]": {
+      "-moz-appearance": "textfield"
+    }
   },
   guidesContainer: {
     marginTop: "16px"
@@ -394,7 +401,79 @@ export const GridGuidelineManager: React.FC = () => {
   return (
     <div className={commonStyles.container} style={{ maxHeight: "400px", overflowY: "auto" }}>
       {/* Grid Controls */}
-      <div className={styles.buttonGrid}>
+      <Label style={{ 
+        fontWeight: "600", 
+        marginBottom: "12px", 
+        fontSize: "16px" 
+      }}>
+        Grid
+      </Label>
+      
+      <div className={styles.controlRow}>
+        <Label className={styles.controlLabel}>Spacing</Label>
+        <div style={{ width: "80px", flex: "none" }}>
+          <input
+            type="text"
+            value={gridSpacing}
+            onChange={(e) => {
+              const newValue = e.target.value;
+              const parsed = parseInt(newValue);
+              if (newValue === '') {
+                setGridSpacing(0);
+              } else if (!isNaN(parsed)) {
+                setGridSpacing(parsed);
+              }
+            }}
+            onClick={(e) => (e.target as HTMLInputElement).select()}
+            style={{ 
+              width: "100%", 
+              padding: "5px 8px",
+              border: "1px solid #d1d1d1",
+              borderRadius: "4px",
+              fontSize: "14px"
+            }}
+          />
+        </div>
+      </div>
+      
+      <div className={styles.controlRow}>
+        <Label className={styles.controlLabel}>Opacity</Label>
+        <div style={{ width: "80px", flex: "none" }}>
+          <input
+            type="text"
+            value={gridOpacity}
+            onChange={(e) => {
+              const newValue = e.target.value;
+              const parsed = parseInt(newValue);
+              if (newValue === '') {
+                setGridOpacity(0);
+              } else if (!isNaN(parsed)) {
+                setGridOpacity(parsed);
+              }
+            }}
+            onClick={(e) => (e.target as HTMLInputElement).select()}
+            style={{ 
+              width: "100%", 
+              padding: "5px 8px",
+              border: "1px solid #d1d1d1",
+              borderRadius: "4px",
+              fontSize: "14px"
+            }}
+          />
+        </div>
+      </div>
+      
+      <div className={styles.controlRow}>
+        <Label className={styles.controlLabel}>Color</Label>
+        <div style={{ display: "flex" }}>
+          <ColorButton color="blue" selectedColor={gridColor} onClick={setGridColor} />
+          <ColorButton color="red" selectedColor={gridColor} onClick={setGridColor} />
+          <ColorButton color="yellow" selectedColor={gridColor} onClick={setGridColor} />
+          <ColorButton color="green" selectedColor={gridColor} onClick={setGridColor} />
+        </div>
+      </div>
+      
+      <div className={styles.buttonGrid} style={{ marginTop: "12px" }}>
         <Button 
           appearance="primary" 
           className={styles.gridButton}
@@ -417,82 +496,43 @@ export const GridGuidelineManager: React.FC = () => {
         </Button>
       </div>
       
-      <div className={styles.controlRow}>
-        <Label className={styles.controlLabel}>Spacing</Label>
-        <Input 
-          className={styles.controlInput}
-          value={gridSpacing.toString()}
-          type="number"
-          min={10}
-          max={200}
-          onChange={(_event, data) => {
-            const value = parseInt(data.value);
-            if (!isNaN(value) && value >= 10 && value <= 200) {
-              setGridSpacing(value);
-            }
-          }}
-        />
-      </div>
-      
-      <div className={styles.controlRow}>
-        <Label className={styles.controlLabel}>Opacity</Label>
-        <div style={{ display: "flex", flex: 1, gap: "8px", alignItems: "center" }}>
-          <Input 
-            className={styles.controlInput}
-            style={{ width: "70px" }}
-            value={gridOpacity.toString()}
-            type="number"
-            min={10}
-            max={100}
-            onChange={(_event, data) => {
-              const value = parseInt(data.value);
-              if (!isNaN(value) && value >= 10 && value <= 100) {
-                setGridOpacity(value);
-              }
-            }}
-          />
-          <Slider 
-            style={{ flex: 1 }}
-            value={gridOpacity}
-            min={10}
-            max={100}
-            step={10}
-            onChange={(_event, data) => setGridOpacity(data.value)}
-          />
-        </div>
-      </div>
-      
-      <div className={styles.controlRow}>
-        <Label className={styles.controlLabel}>Color</Label>
-        <div style={{ display: "flex" }}>
-          <ColorButton color="blue" selectedColor={gridColor} onClick={setGridColor} />
-          <ColorButton color="red" selectedColor={gridColor} onClick={setGridColor} />
-          <ColorButton color="yellow" selectedColor={gridColor} onClick={setGridColor} />
-          <ColorButton color="green" selectedColor={gridColor} onClick={setGridColor} />
-        </div>
-      </div>
-      
       {/* Guidelines Section */}
       <div className={styles.guidesContainer}>
         <Divider />
-        <Label style={{ marginTop: "12px", marginBottom: "8px" }}>Guidelines</Label>
+        <Label style={{ 
+          fontWeight: "600", 
+          marginTop: "12px", 
+          marginBottom: "12px", 
+          fontSize: "16px" 
+        }}>
+          Guidelines
+        </Label>
         
         <div className={styles.controlRow}>
           <Label className={styles.controlLabel}>Position</Label>
-          <Input 
+          <div style={{ width: "80px", flex: "none" }}>
-            className={styles.controlInput}
+            <input
-            value={guidePosition.toString()}
+              type="text"
-            type="number"
+              value={guidePosition}
-            min={0}
+              onChange={(e) => {
-            max={guideDirection === "horizontal" ? 540 : 960}
+                const newValue = e.target.value;
-            onChange={(_event, data) => {
+                const parsed = parseInt(newValue);
-              const value = parseInt(data.value);
+                if (newValue === '') {
-              const maxVal = guideDirection === "horizontal" ? 540 : 960;
+                  setGuidePosition(0);
-              if (!isNaN(value) && value >= 0 && value <= maxVal) {
+                } else if (!isNaN(parsed)) {
-                setGuidePosition(value);
+                  setGuidePosition(parsed);
-              }
+                }
-            }}
+              }}
-          />
+              onClick={(e) => (e.target as HTMLInputElement).select()}
+              style={{ 
+                width: "100%", 
+                padding: "5px 8px",
+                border: "1px solid #d1d1d1",
+                borderRadius: "4px",
+                fontSize: "14px"
+              }}
+            />
+          </div>
         </div>
         
         <div className={styles.controlRow}>