feat(home): horizontal scrollable quick log + wardrobe shortcut

- Convert Quick Log from grid-cols-4 to horizontal scroll strip so
  it scales to any number of actions without layout breakage
- Add Wardrobe 👗 shortcut linking directly to /wardrobe/add,
  saving mama the Menu → Wardrobe → Add Garment 3-tap journey
- Fix: replace non-existent `no-scrollbar` class with `scrollbar-hide`
  across page.tsx, wardrobe pages, memories page, and TabBar component

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/app/memories/page.tsx

@@ -225,7 +225,7 @@ export default function MemoriesPage() {
       </form>
 
       {/* Folder pills */}
-      <div className="px-4 py-2 flex gap-2 overflow-x-auto no-scrollbar">
+      <div className="px-4 py-2 flex gap-2 overflow-x-auto scrollbar-hide">
         {allFolders.map(folder => {
           const count = folder.id === "" ? memories.length : (folderCounts[folder.id] || 0);
           const isActive = activeFolder === folder.id;

src/app/page.tsx

@@ -262,11 +262,12 @@ export default function HomePage() {
             );
           })()}
         </div>
-        <div className="grid grid-cols-4 gap-2">
+        <div className="flex gap-3 overflow-x-auto scrollbar-hide pb-1 -mx-4 px-4">
-          <button onClick={() => setModalType("feed")} className="flex flex-col items-center p-4 bg-white dark:bg-gray-800 rounded-xl shadow-sm"><span className="text-3xl">🍼</span><span className="text-sm mt-1">Feed</span></button>
+          <button onClick={() => setModalType("feed")} className="flex-shrink-0 flex flex-col items-center p-4 bg-white dark:bg-gray-800 rounded-xl shadow-sm w-[72px]"><span className="text-3xl">🍼</span><span className="text-sm mt-1">Feed</span></button>
-          <button onClick={() => setModalType("sleep")} className="flex flex-col items-center p-4 bg-white dark:bg-gray-800 rounded-xl shadow-sm"><span className="text-3xl">😴</span><span className="text-sm mt-1">Sleep</span></button>
+          <button onClick={() => setModalType("sleep")} className="flex-shrink-0 flex flex-col items-center p-4 bg-white dark:bg-gray-800 rounded-xl shadow-sm w-[72px]"><span className="text-3xl">😴</span><span className="text-sm mt-1">Sleep</span></button>
-          <button onClick={() => setModalType("diaper")} className="flex flex-col items-center p-4 bg-white dark:bg-gray-800 rounded-xl shadow-sm"><span className="text-3xl">🚼</span><span className="text-sm mt-1">Diaper</span></button>
+          <button onClick={() => setModalType("diaper")} className="flex-shrink-0 flex flex-col items-center p-4 bg-white dark:bg-gray-800 rounded-xl shadow-sm w-[72px]"><span className="text-3xl">🚼</span><span className="text-sm mt-1">Diaper</span></button>
-          <Link href="/medical" className="flex flex-col items-center p-4 bg-white dark:bg-gray-800 rounded-xl shadow-sm"><span className="text-3xl">💊</span><span className="text-sm mt-1">Medical</span></Link>
+          <Link href="/medical" className="flex-shrink-0 flex flex-col items-center p-4 bg-white dark:bg-gray-800 rounded-xl shadow-sm w-[72px]"><span className="text-3xl">💊</span><span className="text-sm mt-1">Medical</span></Link>
+          <Link href="/wardrobe/add" className="flex-shrink-0 flex flex-col items-center p-4 bg-white dark:bg-gray-800 rounded-xl shadow-sm w-[72px]"><span className="text-3xl">👗</span><span className="text-sm mt-1">Wardrobe</span></Link>
         </div>
       </div>
 

src/app/wardrobe/outfit/page.tsx

@@ -100,7 +100,7 @@ export default function OutfitSuggestionPage() {
       )}
 
       {/* Occasion filter */}
-      <div className="px-4 mb-4 flex gap-2 overflow-x-auto no-scrollbar">
+      <div className="px-4 mb-4 flex gap-2 overflow-x-auto scrollbar-hide">
         {OCCASION_OPTS.map(o => (
           <button
             key={o || "all"}

src/app/wardrobe/page.tsx

@@ -121,7 +121,7 @@ export default function WardrobePage() {
       {/* Filters */}
       <div className="px-4 space-y-2 mb-4">
         {/* Status row */}
-        <div className="flex gap-2 overflow-x-auto no-scrollbar pb-1">
+        <div className="flex gap-2 overflow-x-auto scrollbar-hide pb-1">
           {STATUS_OPTS.map(s => (
             <button
               key={s.value}
@@ -138,7 +138,7 @@ export default function WardrobePage() {
         </div>
 
         {/* Category row */}
-        <div className="flex gap-2 overflow-x-auto no-scrollbar pb-1">
+        <div className="flex gap-2 overflow-x-auto scrollbar-hide pb-1">
           <button
             onClick={() => setFilterCategory("")}
             className={`px-3 py-1 rounded-full text-sm whitespace-nowrap flex-shrink-0 transition-all ${
@@ -161,7 +161,7 @@ export default function WardrobePage() {
         </div>
 
         {/* Size row */}
-        <div className="flex gap-2 overflow-x-auto no-scrollbar pb-1">
+        <div className="flex gap-2 overflow-x-auto scrollbar-hide pb-1">
           <button
             onClick={() => setFilterSize("")}
             className={`px-3 py-1 rounded-full text-xs whitespace-nowrap flex-shrink-0 transition-all ${

src/components/TabBar.tsx

@@ -12,7 +12,7 @@ interface Props {
 
 export function TabBar({ tabs, value, onChange, danger }: Props) {
   return (
-    <div className="flex gap-2 overflow-x-auto pb-1 no-scrollbar">
+    <div className="flex gap-2 overflow-x-auto pb-1 scrollbar-hide">
       {tabs.map(tab => {
         const isActive = tab.value === value;
         const isDanger = danger && tab.value === danger;