From 2bc07c47e6276707075a2b74ad7b62d02aed3c17 Mon Sep 17 00:00:00 2001
From: yusufipk <mail@yusufipek.me>
Date: Tue, 18 Aug 2026 12:21:02 +0300
Subject: [PATCH] fix(theme): stop the theme menu from crowding its own top
 edge

The menu had no inner padding, so the first row's icon sat flush against
the popover border and the whole box read as clipped under the header.
It now carries the same padding, offset and fixed width as the account
menu next to it, and the System row uses a lucide icon instead of a
colour emoji that broke the icon column's alignment.
---
 components/theme-toggle.tsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/components/theme-toggle.tsx b/components/theme-toggle.tsx
index b43c2c0..fe9d2c1 100644
--- a/components/theme-toggle.tsx
+++ b/components/theme-toggle.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { Moon, Sun } from 'lucide-react';
+import { Monitor, Moon, Sun } from 'lucide-react';
 import { useTheme } from 'next-themes';
 import { Button } from '@/components/ui/button';
 import {
@@ -17,23 +17,27 @@ export function ThemeToggle() {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="ghost" size="icon">
+        <Button variant="ghost" size="icon" className="relative">
           <Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
           <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
           <span className="sr-only">Toggle theme</span>
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
+      <DropdownMenuContent
+        align="end"
+        sideOffset={10}
+        className="w-40 min-w-40 rounded-md border p-1"
+      >
         <DropdownMenuItem onClick={() => setTheme('light')}>
-          <Sun className="h-4 w-4 mr-2" />
+          <Sun />
           Light
         </DropdownMenuItem>
         <DropdownMenuItem onClick={() => setTheme('dark')}>
-          <Moon className="h-4 w-4 mr-2" />
+          <Moon />
           Dark
         </DropdownMenuItem>
         <DropdownMenuItem onClick={() => setTheme('system')}>
-          <span className="h-4 w-4 mr-2">💻</span>
+          <Monitor />
           System
         </DropdownMenuItem>
       </DropdownMenuContent>