fix responsive UI

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## Version 0.1.15
+
+### Fixed
+
+- fix responsive layout for header and coins page in small viewport
+
 ## Version 0.1.14
 
 ### Added

components/CoinBalance.tsx

@@ -1,6 +1,6 @@
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Coins } from 'lucide-react'
-import { formatNumber } from '@/lib/utils/formatNumber'
+import { FormattedNumber } from '@/components/FormattedNumber'
 import { useAtom } from 'jotai'
 import { settingsAtom } from '@/lib/atoms'
 import { useCoins } from '@/hooks/useCoins'
@@ -18,12 +18,12 @@ export default function CoinBalance({ coinBalance }: { coinBalance: number }) {
           <Coins className="h-12 w-12 text-yellow-400 mr-4" />
           <div className="flex flex-col">
             <span className="text-4xl font-bold">
-              {formatNumber({ amount: coinBalance, settings })}
+              <FormattedNumber amount={coinBalance} settings={settings} />
             </span>
             {coinsEarnedToday > 0 && (
               <div className="flex items-center gap-1 mt-1">
                 <span className="text-md text-green-600 dark:text-green-400 font-medium">
-                  +{formatNumber({ amount: coinsEarnedToday, settings })}
+                  +<FormattedNumber amount={coinsEarnedToday} settings={settings} />
                 </span>
                 <span className="text-md text-muted-foreground">
                   today

components/CoinsManager.tsx

@@ -3,7 +3,7 @@
 import { useState } from 'react'
 import { t2d, d2s, getNow, isSameDate } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
-import { formatNumber } from '@/lib/utils/formatNumber'
+import { FormattedNumber } from '@/components/FormattedNumber'
 import { History } from 'lucide-react'
 import EmptyState from './EmptyState'
 import { Input } from '@/components/ui/input'
@@ -53,7 +53,7 @@ export default function CoinsManager() {
               <span className="text-2xl animate-bounce hover:animate-none cursor-default">💰</span>
               <div>
                 <div className="text-sm font-normal text-muted-foreground">Current Balance</div>
-                <div className="text-3xl font-bold">{formatNumber({ amount: balance, settings })} coins</div>
+                <div className="text-3xl font-bold"><FormattedNumber amount={balance} settings={settings} /> coins</div>
               </div>
             </CardTitle>
           </CardHeader>
@@ -107,19 +107,19 @@ export default function CoinsManager() {
             <CardTitle>Statistics</CardTitle>
           </CardHeader>
           <CardContent>
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div className="grid grid-cols-1 xl:grid-cols-3 gap-4">
               {/* Top Row - Totals */}
               <div className="p-4 rounded-lg bg-green-100 dark:bg-green-900">
                 <div className="text-sm text-green-800 dark:text-green-100 mb-1">Total Earned</div>
                 <div className="text-2xl font-bold text-green-900 dark:text-green-50">
-                  {formatNumber({ amount: totalEarned, settings })} 🪙
+                  <FormattedNumber amount={totalEarned} settings={settings} /> 🪙
                 </div>
               </div>
 
               <div className="p-4 rounded-lg bg-red-100 dark:bg-red-900">
                 <div className="text-sm text-red-800 dark:text-red-100 mb-1">Total Spent</div>
                 <div className="text-2xl font-bold text-red-900 dark:text-red-50">
-                  {formatNumber({ amount: totalSpent, settings })} 💸
+                  <FormattedNumber amount={totalSpent} settings={settings} /> 💸
                 </div>
               </div>
 
@@ -134,14 +134,14 @@ export default function CoinsManager() {
               <div className="p-4 rounded-lg bg-blue-100 dark:bg-blue-900">
                 <div className="text-sm text-blue-800 dark:text-blue-100 mb-1">Today's Earned</div>
                 <div className="text-2xl font-bold text-blue-900 dark:text-blue-50">
-                  {formatNumber({ amount: coinsEarnedToday, settings })} 🪙
+                  <FormattedNumber amount={coinsEarnedToday} settings={settings} /> 🪙
                 </div>
               </div>
 
               <div className="p-4 rounded-lg bg-purple-100 dark:bg-purple-900">
                 <div className="text-sm text-purple-800 dark:text-purple-100 mb-1">Today's Spent</div>
                 <div className="text-2xl font-bold text-purple-900 dark:text-purple-50">
-                  {formatNumber({ amount: coinsSpentToday, settings })} 💸
+                  <FormattedNumber amount={coinsSpentToday} settings={settings} /> 💸
                 </div>
               </div>
 

components/FormattedNumber.tsx

@@ -0,0 +1,16 @@
+import { formatNumber } from '@/lib/utils/formatNumber'
+import { Settings } from '@/lib/types'
+
+interface FormattedNumberProps {
+  amount: number
+  settings: Settings
+  className?: string
+}
+
+export function FormattedNumber({ amount, settings, className }: FormattedNumberProps) {
+  return (
+    <span className={`break-all ${className || ''}`}>
+      {formatNumber({ amount, settings })}
+    </span>
+  )
+}

components/Header.tsx

@@ -4,6 +4,7 @@ import { useState } from 'react'
 import { useAtom } from 'jotai'
 import { settingsAtom } from '@/lib/atoms'
 import { useCoins } from '@/hooks/useCoins'
+import { FormattedNumber } from '@/components/FormattedNumber'
 import { Bell, Menu, Settings, User, Info, Coins } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { Logo } from '@/components/Logo'
@@ -30,19 +31,25 @@ export default function Header({ className }: HeaderProps) {
       <header className={`border-b bg-white dark:bg-gray-800 shadow-sm ${className || ''}`}>
         <div className="mx-auto py-4 px-4 sm:px-6 lg:px-8">
           <div className="flex items-center justify-between">
-            <Link href="/">
+            <Link href="/" className="mr-3 sm:mr-4">
               <Logo />
             </Link>
-            <div className="flex items-center gap-2">
+            <div className="flex items-center gap-1 sm:gap-2">
-              <Link href="/coins" className="flex items-center gap-2 px-3 py-1.5 bg-white hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-600 rounded-full transition-colors border border-gray-200 dark:border-gray-600">
+              <Link href="/coins" className="flex items-center gap-1 sm:gap-2 px-3 py-1.5 bg-white hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-600 rounded-full transition-colors border border-gray-200 dark:border-gray-600">
                 <Coins className="h-5 w-5 text-yellow-500 dark:text-yellow-400" />
-                <div className="flex items-baseline gap-2">
+                <div className="flex items-baseline gap-1 sm:gap-2">
-                  <span className="text-gray-800 dark:text-gray-100 font-medium text-lg">
+                  <FormattedNumber 
-                    {balance}
+                    amount={balance} 
-                  </span>
+                    settings={settings} 
+                    className="text-gray-800 dark:text-gray-100 font-medium text-lg" 
+                  />
                   {coinsEarnedToday > 0 && (
                     <span className="text-sm bg-green-50 dark:bg-green-900/30 text-green-700 dark:text-green-400 px-2 py-1 rounded-full border border-green-100 dark:border-green-800">
-                      +{coinsEarnedToday}
+                      <FormattedNumber 
+                        amount={coinsEarnedToday} 
+                        settings={settings} 
+                        className="inline" 
+                      />
                     </span>
                   )}
                 </div>

components/Layout.tsx

@@ -4,7 +4,7 @@ import Navigation from './Navigation'
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
-    <div className="flex flex-col h-screen bg-gray-100 dark:bg-gray-900">
+    <div className="flex flex-col h-screen bg-gray-100 dark:bg-gray-900 overflow-hidden">
       <Header className="sticky top-0 z-50" />
       <div className="flex flex-1 overflow-hidden">
         <Navigation viewPort='main' />

package.json

@@ -1,6 +1,6 @@
 {
   "name": "habittrove",
-  "version": "0.1.14",
+  "version": "0.1.15",
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack",