fix: compact sidebar and template tabs overflow

Author: raadu

apps/web/src/components/TemplateInput.tsx

@@ -88,7 +88,7 @@ const TemplateInput = ({ boxRef }: TemplateInputProps) => {
     // itself (row 2) instead of guessing a fixed offset for the row above it.
     // Below lg it stays a normal block so mobile keeps its original stacking.
     <div className="space-y-1 lg:space-y-0 lg:contents">
-      <div className="lg:col-start-1 lg:row-start-1">
+      <div className="lg:col-start-1 lg:row-start-1 overflow-hidden">
         {isLoadingTemplates ? (
           <div className="flex gap-2 py-1">
             <div className="w-24 h-7 bg-gray-100 dark:bg-gray-700 animate-pulse" />

apps/web/src/layout/Sidebar/DarkModeToggle/index.tsx

@@ -13,24 +13,24 @@ const DarkModeToggle = ({ isExpanded }: DarkModeToggleProps) => {
     <button
       onClick={toggleDark}
       className={clsx(
-        'h-12 flex items-center transition-all duration-300 group shrink-0 text-gray-400 hover:text-amber-500 dark:hover:text-amber-400 justify-center w-auto lg:w-full lg:border-t border-gray-100 dark:border-gray-700 lg:hover:bg-gray-50 lg:dark:hover:bg-gray-700',
-        isExpanded && 'lg:gap-3 lg:px-4',
+        'h-8 flex items-center transition-all duration-300 group shrink-0 text-gray-400 hover:text-amber-500 dark:hover:text-amber-400 justify-center w-auto lg:w-full lg:border-t border-gray-100 dark:border-gray-700 lg:hover:bg-gray-50 lg:dark:hover:bg-gray-700',
+        isExpanded && 'lg:gap-2 lg:px-3',
       )}
       title={isDark ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
     >
       {isDark ? (
         <FaSun
-          size={18}
-          className="lg:size-5 group-hover:scale-110 group-hover:text-amber-500 transition-all shrink-0"
+          size={14}
+          className="group-hover:scale-110 group-hover:text-amber-500 transition-all shrink-0"
         />
       ) : (
         <FaMoon
-          size={16}
-          className="lg:size-[18px] group-hover:scale-110 group-hover:text-blue-500 transition-all shrink-0"
+          size={13}
+          className="group-hover:scale-110 group-hover:text-blue-500 transition-all shrink-0"
         />
       )}
       {isExpanded && (
-        <span className="hidden lg:block text-xs font-semibold text-gray-500 dark:text-gray-400 whitespace-nowrap">
+        <span className="hidden lg:block text-[11px] font-semibold text-gray-500 dark:text-gray-400 whitespace-nowrap">
           {isDark ? 'Light Mode' : 'Dark Mode'}
         </span>
       )}

apps/web/src/layout/Sidebar/Navigation/index.tsx

@@ -73,7 +73,7 @@ const SidebarNavigation = ({ isExpanded }: SidebarNavigationProps) => {
   ];
 
   return (
-    <nav className="flex-1 flex flex-row lg:flex-col p-1 lg:p-2 gap-2 lg:gap-0 lg:space-y-1.5 w-full overflow-x-auto lg:overflow-visible items-center lg:items-stretch h-full no-scrollbar">
+    <nav className="flex-1 flex flex-row lg:flex-col p-0.5 lg:p-1 gap-1 lg:gap-0 lg:space-y-0.5 w-full overflow-x-auto lg:overflow-visible items-center lg:items-stretch h-full no-scrollbar">
       {menuItems.map((item) => {
         const Icon = item.icon;
         const isActive = currentPath === item.path;
@@ -88,10 +88,10 @@ const SidebarNavigation = ({ isExpanded }: SidebarNavigationProps) => {
               onClick={() => navigate(item.path)}
               className={clsx(
                 'group flex items-center cursor-pointer transition-all duration-300 relative',
-                'p-2 lg:p-2.5 mx-1 rounded-xl lg:rounded-2xl whitespace-nowrap',
+                'py-1.5 px-2 mx-0.5 rounded-md whitespace-nowrap',
                 isExpanded
-                  ? 'lg:rounded-xl lg:gap-3 gap-2'
-                  : 'lg:justify-center gap-2',
+                  ? 'lg:rounded-md lg:gap-2 gap-1.5'
+                  : 'lg:justify-center gap-1.5',
                 isExpandedItem
                   ? 'bg-blue-50/80 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 shadow-sm shadow-blue-500/5'
                   : 'text-gray-400 dark:text-gray-500 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-gray-600 dark:hover:text-gray-300',
@@ -101,18 +101,18 @@ const SidebarNavigation = ({ isExpanded }: SidebarNavigationProps) => {
               <div
                 className={clsx(
                   'shrink-0 flex items-center justify-center transition-all duration-300',
-                  isExpandedItem ? 'scale-110' : 'group-hover:scale-110',
+                  isExpandedItem ? 'scale-105' : 'group-hover:scale-105',
                 )}
               >
                 <Icon
-                  size={isExpanded ? 16 : 20}
-                  className="lg:w-5 lg:h-5 w-4 h-4"
+                  size={isExpanded ? 14 : 16}
+                  className="lg:w-4 lg:h-4 w-3.5 h-3.5"
                 />
               </div>
 
               <span
                 className={clsx(
-                  'text-[12px] lg:text-[13px] font-bold tracking-tight transition-all truncate flex-1',
+                  'text-[11px] lg:text-[12px] font-semibold tracking-tight transition-all truncate flex-1',
                   isExpandedItem ? 'opacity-100' : 'opacity-80',
                   !isExpanded ? 'lg:hidden block' : 'block',
                   'hidden sm:block',
@@ -134,12 +134,12 @@ const SidebarNavigation = ({ isExpanded }: SidebarNavigationProps) => {
               )}
 
               {isExpandedItem && (
-                <div className="absolute bottom-0 lg:bottom-auto left-auto lg:left-0 w-5 lg:w-1 h-1 lg:h-4 bg-blue-500 rounded-full" />
+                <div className="absolute bottom-0 lg:bottom-auto left-auto lg:left-0 w-4 lg:w-0.5 h-0.5 lg:h-3 bg-blue-500 rounded-full" />
               )}
             </div>
 
             {hasChildren && isExpandedItem && (
-              <div className="flex flex-row lg:flex-col ml-2 lg:ml-3 mt-0.5 lg:mt-0.5 gap-1">
+              <div className="flex flex-row lg:flex-col ml-2 lg:ml-2.5 mt-0.5 lg:mt-0.5 gap-0.5">
                 {item.children!.map((child) => {
                   const isChildRouteActive = currentPath === child.path;
                   return (
@@ -148,10 +148,10 @@ const SidebarNavigation = ({ isExpanded }: SidebarNavigationProps) => {
                       onClick={() => navigate(child.path)}
                       className={clsx(
                         'group flex items-center cursor-pointer transition-all duration-200 relative',
-                        'px-2 lg:px-3 py-1.5 lg:py-1.5 mx-1 rounded-lg lg:rounded-lg whitespace-nowrap',
+                        'px-2 py-1 mx-0.5 rounded whitespace-nowrap',
                         isExpanded
-                          ? 'lg:gap-2 gap-1.5'
-                          : 'lg:justify-center gap-1.5',
+                          ? 'lg:gap-1.5 gap-1'
+                          : 'lg:justify-center gap-1',
                         isChildRouteActive
                           ? 'bg-blue-50/60 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400'
                           : 'text-gray-400 dark:text-gray-500 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-gray-600 dark:hover:text-gray-300',
@@ -168,7 +168,7 @@ const SidebarNavigation = ({ isExpanded }: SidebarNavigationProps) => {
                       />
                       <span
                         className={clsx(
-                          'text-[11px] lg:text-[12px] font-semibold tracking-tight transition-all truncate',
+                          'text-[10px] lg:text-[11px] font-semibold tracking-tight transition-all truncate',
                           !isExpanded ? 'lg:hidden block' : 'block',
                           'hidden sm:block',
                         )}

apps/web/src/layout/Sidebar/ProfileSection.tsx

@@ -46,15 +46,15 @@ const ProfileSection = ({ isExpanded }: ProfileSectionProps) => {
       {isAuthenticated && user ? (
         <div
           className={clsx(
-            'flex items-center gap-2.5 h-12 lg:h-12 px-3 transition-all shrink-0',
+            'flex items-center gap-2 h-8 lg:h-8 px-2 transition-all shrink-0',
             isExpanded
               ? 'lg:hover:bg-gray-50 lg:dark:hover:bg-gray-800/50 w-full lg:w-full'
               : 'justify-center lg:justify-center w-auto lg:w-full',
           )}
         >
           <button
             onClick={handleAuthAction}
-            className="w-5 h-5 lg:w-7 lg:h-7 rounded-full lg:rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center text-white font-bold text-[9px] lg:text-[11px] shrink-0 shadow-sm cursor-pointer"
+            className="w-4 h-4 lg:w-6 lg:h-6 rounded-full lg:rounded-md bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center text-white font-bold text-[8px] lg:text-[10px] shrink-0 shadow-sm cursor-pointer"
           >
             {user.avatarUrl ? (
               <img
@@ -70,10 +70,10 @@ const ProfileSection = ({ isExpanded }: ProfileSectionProps) => {
           {isExpanded && (
             <span className="hidden lg:contents">
               <div className="flex-1 min-w-0">
-                <p className="text-[12px] font-semibold text-gray-700 dark:text-gray-200 truncate leading-tight">
+                <p className="text-[11px] font-semibold text-gray-700 dark:text-gray-200 truncate leading-tight">
                   {user.name}
                 </p>
-                <p className="text-[9px] text-gray-400 truncate leading-tight">
+                <p className="text-[8px] text-gray-400 truncate leading-tight">
                   {user.email}
                 </p>
               </div>
@@ -91,17 +91,17 @@ const ProfileSection = ({ isExpanded }: ProfileSectionProps) => {
         <button
           onClick={handleAuthAction}
           className={clsx(
-            'h-12 flex items-center transition-all duration-300 group shrink-0 text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 justify-center w-auto lg:w-full lg:border-t border-gray-100 dark:border-gray-700 lg:hover:bg-gray-50 lg:dark:hover:bg-gray-700',
-            isExpanded && 'lg:gap-3 lg:px-4',
+            'h-8 flex items-center transition-all duration-300 group shrink-0 text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 justify-center w-auto lg:w-full lg:border-t border-gray-100 dark:border-gray-700 lg:hover:bg-gray-50 lg:dark:hover:bg-gray-700',
+            isExpanded && 'lg:gap-2 lg:px-3',
           )}
           title="Sign In"
         >
           <FaSignInAlt
-            size={18}
+            size={14}
             className="group-hover:scale-110 transition-all shrink-0"
           />
           {isExpanded && (
-            <span className="hidden lg:block text-xs font-semibold text-gray-500 dark:text-gray-400 whitespace-nowrap">
+            <span className="hidden lg:block text-[11px] font-semibold text-gray-500 dark:text-gray-400 whitespace-nowrap">
               Sign In
             </span>
           )}

apps/web/src/layout/Sidebar/Toggle/index.tsx

@@ -9,17 +9,17 @@ const SidebarToggle = ({ isExpanded, onToggle }: SidebarToggleProps) => {
   return (
     <button
       onClick={onToggle}
-      className="h-12 w-full text-gray-400 dark:text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 border-t border-gray-100 dark:border-gray-700 hidden lg:flex items-center justify-center hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-all duration-300 group shrink-0"
+      className="h-8 w-full text-gray-400 dark:text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 border-t border-gray-100 dark:border-gray-700 hidden lg:flex items-center justify-center hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-all duration-300 group shrink-0"
       title={isExpanded ? 'Collapse Sidebar' : 'Expand Sidebar'}
     >
       {isExpanded ? (
         <HiChevronLeft
-          size={24}
+          size={16}
           className="group-hover:-translate-x-0.5 transition-transform"
         />
       ) : (
         <HiChevronRight
-          size={24}
+          size={16}
           className="group-hover:translate-x-0.5 transition-transform"
         />
       )}

apps/web/src/layout/Sidebar/index.tsx

@@ -20,7 +20,7 @@ const Sidebar = ({ isExpanded, onToggle }: SidebarProps) => {
     >
       <SidebarHeader isExpanded={isExpanded} />
       <SidebarNavigation isExpanded={isExpanded} />
-      <div className="flex lg:flex-col ml-auto lg:ml-0 lg:mt-auto items-center lg:items-stretch lg:w-full gap-4 lg:gap-0 pr-3 lg:pr-0">
+      <div className="flex lg:flex-col ml-auto lg:ml-0 lg:mt-auto items-center lg:items-stretch lg:w-full gap-1 lg:gap-0 pr-3 lg:pr-0">
         <ProfileSection isExpanded={isExpanded} />
         <DarkModeToggle isExpanded={isExpanded} />
         <SidebarToggle isExpanded={isExpanded} onToggle={onToggle} />

apps/web/src/utils/promptUtils.ts

@@ -108,7 +108,7 @@ const buildChangesRule = (writingStyle: WritingStyle): string => {
 If a resume is provided, do not invent new skills and experiences. Use existing skills and experiences to match with the job description.
 Keep ALL other sentences exactly as written. Do NOT rewrite, rephrase, restructure, or add new paragraphs. Preserve the original text word-for-word except for the changes listed above.`;
     case 'balanced':
-      return `Do not fabricate or invent anything new. Use the cover letter (if any), resume (if any), or combination of both. Avoid using dash (-) to join sentences. Avoid complex sentences. Do not put comma (,) before "and" — for example write "Bread, Butter and Butterfly" not "Bread, Butter, and Butterfly". Use human voice and writing style.`;
+      return `Do not fabricate or invent anything new. Use the cover letter (if any), resume (if any), or combination of both. Avoid using dash (-) or double dashes (--) to join sentences or words. Avoid complex sentences. Do not put comma (,) before "and" — for example it should be "Bread, Butter and Butterfly". It should not be "Bread, Butter, and Butterfly". Use human voice and writing style.`;
     case 'full':
       return `Rewrite the cover letter as you like. You may invent new skills, technologies and experiences outside the user's resume or cover letter template. But always make sure those match well with the job description.`;
   }