Use shadcn Button for the settings gear in the top tab bar (#967)

Follow-up on #966 which added `hover:bg-accent` to the existing raw
`<button>` element. That element is `h-full w-10`, so the new hover
fill spanned the entire title-bar height — a giant vertical accent
strip instead of the small icon-button highlight we wanted.

Replace the raw element with the same shadcn `Button variant="ghost"
size="icon" h-6 w-6` that every other icon on the same row already
uses. Wrap it in a centered container that keeps the title-bar height
for window-control alignment and carries `app-drag` so the empty
space around the icon still drags the window; the button itself stays
`app-no-drag`.

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

components/TopTabs.tsx

@@ -1098,16 +1098,18 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
           </Tooltip>
         </div>
         {/* Settings gear button - sits to the left of WindowControls on win/linux, at the right edge on mac */}
-        <div className="self-stretch flex items-stretch">
+        <div className="self-stretch flex items-center px-2 app-drag" style={dragRegionStyle}>
           <Tooltip>
             <TooltipTrigger asChild>
-              <button
-                onClick={onOpenSettings}
-                className="h-full w-10 flex items-center justify-center transition-all duration-150 app-no-drag hover:bg-accent"
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-6 w-6 app-no-drag"
                 style={{ color: 'var(--top-tabs-muted, hsl(var(--muted-foreground)))' }}
+                onClick={onOpenSettings}
               >
                 <Settings size={16} />
-              </button>
+              </Button>
             </TooltipTrigger>
             <TooltipContent>{t('topTabs.openSettings')}</TooltipContent>
           </Tooltip>