Fix collapsed Settings fields; add the ship script

INPUT carried w-full, which lost the specificity coin-toss against the
group select's w-[110px] and starved the name and URL fields to stubs.
Width now belongs to the call site.

Settings lists apps in the nav's order rather than by position alone,
so the two never disagree.

scripts/ship.sh builds, replaces /Applications/Work.app and relaunches.

src/components/Settings.tsx

@@ -46,6 +46,13 @@ export default function Settings({ config, theme, onConfig, onTheme, onClose }:
 
   const groups = [...config.groups].sort((a, b) => a.order - b.order);
 
+  // Same order the nav shows, so the two lists never disagree about position.
+  const groupRank = (id: string | null) =>
+    id === null ? -1 : (groups.find((g) => g.id === id)?.order ?? Number.MAX_SAFE_INTEGER);
+  const orderedApps = [...config.apps].sort(
+    (a, b) => groupRank(a.groupId) - groupRank(b.groupId) || a.order - b.order,
+  );
+
   const run = async (fn: () => Promise<Config>) => {
     try {
       onConfig(await fn());
@@ -88,9 +95,7 @@ export default function Settings({ config, theme, onConfig, onTheme, onClose }:
               {config.apps.length === 0 && (
                 <p className={HELP}>Nothing yet. Add the first one below.</p>
               )}
-              {[...config.apps]
-                .sort((a, b) => a.order - b.order)
-                .map((app) => (
+              {orderedApps.map((app) => (
                   <div
                     key={app.id}
                     className="flex items-center gap-2 rounded-lg border border-slate-200 px-2 py-1.5 dark:border-slate-800"
@@ -99,18 +104,18 @@ export default function Settings({ config, theme, onConfig, onTheme, onClose }:
                     <input
                       value={app.name}
                       onChange={(e) => patch(app, { name: e.target.value })}
-                      className={`${INPUT} h-[26px] flex-1`}
+                      className={`${INPUT} h-[26px] w-full flex-1`}
                     />
                     <input
                       value={app.url}
                       onChange={(e) => patch(app, { url: e.target.value })}
                       title="Changing this rebuilds the app's view"
-                      className={`${INPUT} h-[26px] flex-[1.4] font-mono text-[11px]`}
+                      className={`${INPUT} h-[26px] w-full flex-[1.4] font-mono text-[11px]`}
                     />
                     <select
                       value={app.groupId ?? ""}
                       onChange={(e) => patch(app, { groupId: e.target.value || null })}
-                      className={`${INPUT} h-[26px] w-[110px] cursor-pointer`}
+                      className={`${INPUT} h-[26px] w-[110px] shrink-0 cursor-pointer`}
                     >
                       <option value="">No group</option>
                       {groups.map((g) => (
@@ -127,7 +132,7 @@ export default function Settings({ config, theme, onConfig, onTheme, onClose }:
                       <TrashIcon />
                     </button>
                   </div>
-                ))}
+              ))}
             </div>
 
             <div className={`${SUBPANEL} flex items-end gap-2`}>
@@ -137,7 +142,7 @@ export default function Settings({ config, theme, onConfig, onTheme, onClose }:
                   value={name}
                   onChange={(e) => setName(e.target.value)}
                   placeholder="Odoo"
-                  className={INPUT}
+                  className={`${INPUT} w-full`}
                 />
               </label>
               <label className="flex-[1.4] space-y-1">
@@ -147,7 +152,7 @@ export default function Settings({ config, theme, onConfig, onTheme, onClose }:
                   onChange={(e) => setUrl(e.target.value)}
                   onKeyDown={(e) => e.key === "Enter" && addApp()}
                   placeholder="example.com"
-                  className={`${INPUT} font-mono text-[11px]`}
+                  className={`${INPUT} w-full font-mono text-[11px]`}
                 />
               </label>
               <label className="w-[110px] space-y-1">
@@ -155,7 +160,7 @@ export default function Settings({ config, theme, onConfig, onTheme, onClose }:
                 <select
                   value={groupId}
                   onChange={(e) => setGroupId(e.target.value)}
-                  className={`${INPUT} cursor-pointer`}
+                  className={`${INPUT} w-full cursor-pointer`}
                 >
                   <option value="">No group</option>
                   {groups.map((g) => (
@@ -190,7 +195,7 @@ export default function Settings({ config, theme, onConfig, onTheme, onClose }:
                     onChange={(e) =>
                       run(() => api.updateGroup({ ...g, name: e.target.value }))
                     }
-                    className={`${INPUT} h-[26px] flex-1`}
+                    className={`${INPUT} h-[26px] w-full flex-1`}
                   />
                   <span className="shrink-0 font-mono text-[10px] text-slate-400">
                     {config.apps.filter((a) => a.groupId === g.id).length} apps
@@ -213,7 +218,7 @@ export default function Settings({ config, theme, onConfig, onTheme, onClose }:
                   onChange={(e) => setGroupName(e.target.value)}
                   onKeyDown={(e) => e.key === "Enter" && addGroup()}
                   placeholder="Finance"
-                  className={INPUT}
+                  className={`${INPUT} w-full`}
                 />
               </label>
               <button onClick={addGroup} className={BTN}>