fix: improve shortcut input layout and placeholder visibility

- Change shortcut input width from fixed w-20 to flex-1 for better space utilization
- Wrap checkbox in flex-shrink-0 container to prevent text wrapping
- Add min-w-0 to input for proper flex behavior
- Fixes placeholder text not being visible due to narrow input width

issue #27

Author: kubrickcode

src/web-view/src/components/group-command-item.tsx

@@ -70,20 +70,22 @@ export const GroupCommandItem = ({
                 onChange={(e) => onUpdate(index, { command: e.target.value })}
               />
               <div className="flex items-center gap-4">
-                <Checkbox
-                  id={`vscode-${index}`}
-                  label="Use VS Code API"
-                  checked={command.useVsCodeApi || false}
-                  onCheckedChange={(checked) =>
-                    onUpdate(index, { useVsCodeApi: !!checked })
-                  }
-                />
+                <div className="flex-shrink-0">
+                  <Checkbox
+                    id={`vscode-${index}`}
+                    label="Use VS Code API"
+                    checked={command.useVsCodeApi || false}
+                    onCheckedChange={(checked) =>
+                      onUpdate(index, { useVsCodeApi: !!checked })
+                    }
+                  />
+                </div>
                 <Input
                   placeholder="Shortcut (optional)"
                   value={command.shortcut || ""}
                   onChange={(e) => onUpdate(index, { shortcut: e.target.value })}
                   maxLength={1}
-                  className="w-20"
+                  className="flex-1 min-w-0"
                 />
               </div>
             </>
@@ -96,7 +98,7 @@ export const GroupCommandItem = ({
                 value={command.shortcut || ""}
                 onChange={(e) => onUpdate(index, { shortcut: e.target.value })}
                 maxLength={1}
-                className="w-20"
+                className="flex-1"
               />
             </div>
           )}