From ac71c94d53b8ef4abd365a18b6e0ad3e09400007 Mon Sep 17 00:00:00 2001
From: Doh <mydohsimpson@gmail.com>
Date: Tue, 20 May 2025 22:12:31 -0400
Subject: [PATCH] fix responsive (#135)

---
 .github/workflows/docker-publish.yml |  1 +
 CHANGELOG.md                         |  8 +++
 app/settings/page.tsx                |  8 +--
 components/CoinsManager.tsx          |  6 +-
 components/Dashboard.tsx             |  4 +-
 components/HabitCalendar.tsx         | 84 ++++++++++++++--------------
 components/HabitList.tsx             | 28 +++++-----
 components/Layout.tsx                | 10 +++-
 components/WishlistManager.tsx       |  8 +--
 messages/de.json                     |  2 +-
 package.json                         |  2 +-
 tailwind.config.ts                   | 11 ++++
 12 files changed, 98 insertions(+), 74 deletions(-)

diff --git a/.github/workflows/docker-publish.yml b/.github/workflows/docker-publish.yml
index 1e89d77..2590042 100644
--- a/.github/workflows/docker-publish.yml
+++ b/.github/workflows/docker-publish.yml
@@ -53,6 +53,7 @@ jobs:
           tags: |
             ${{ steps.check-version.outputs.EXISTS == 'false' && format('dohsimpson/habittrove:v{0}', steps.package-version.outputs.VERSION) || '' }}
             dohsimpson/habittrove:demo
+            dohsimpson/habittrove:latest
 
   deploy-demo:
     runs-on: ubuntu-latest
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 90852a7..dcb7858 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,13 @@
 # Changelog
 
+## Version 0.2.13
+
+### Fixed
+
+* fix responsive design on mobile (#134)
+* fix translation (#132)
+* fix latest docker tag auto build (#131)
+
 ## Version 0.2.12
 
 ### Added
diff --git a/app/settings/page.tsx b/app/settings/page.tsx
index 8df1e77..5fb574a 100644
--- a/app/settings/page.tsx
+++ b/app/settings/page.tsx
@@ -35,7 +35,7 @@ export default function SettingsPage() {
 
   return (
     <>
-      <div className="container mx-auto px-4 py-8">
+      <div>
         <h1 className="text-3xl font-bold mb-6">{t('title')}</h1>
         <Card className="mb-6">
           <CardHeader>
@@ -104,7 +104,7 @@ export default function SettingsPage() {
                       system: { ...settings.system, timezone: e.target.value }
                     })
                   }
-                  className="w-[200px] rounded-md border border-input bg-background px-3 py-2 mb-4"
+                  className="w-[110px] xs:w-[200px] rounded-md border border-input bg-background px-3 py-2 mb-4"
                 >
                   {Intl.supportedValuesOf('timeZone').map((tz) => (
                     <option key={tz} value={tz}>
@@ -132,7 +132,7 @@ export default function SettingsPage() {
                       system: { ...settings.system, weekStartDay: Number(e.target.value) as WeekDay }
                     })
                   }
-                  className="w-[200px] rounded-md border border-input bg-background px-3 py-2"
+                  className="w-[110px] xs:w-[200px] rounded-md border border-input bg-background px-3 py-2"
                 >
                   {([
                     ['sunday', 0],
@@ -215,7 +215,7 @@ export default function SettingsPage() {
                     variant: 'default',
                   });
                 }}
-                className={`w-[200px] rounded-md border border-input bg-background px-3 py-2 ${serverSettings.isDemo ? 'cursor-not-allowed opacity-50' : ''}`}
+                className={`w-[110px] xs:w-[200px] rounded-md border border-input bg-background px-3 py-2 ${serverSettings.isDemo ? 'cursor-not-allowed opacity-50' : ''}`}
               >
                 {/* Add more languages as needed */}
                 <option value="en">English</option>
diff --git a/components/CoinsManager.tsx b/components/CoinsManager.tsx
index bdc8f71..517599e 100644
--- a/components/CoinsManager.tsx
+++ b/components/CoinsManager.tsx
@@ -101,12 +101,12 @@ export default function CoinsManager() {
   }
 
   return (
-    <div className="container mx-auto px-4 py-8">
+    <div>
       <div className="flex items-center justify-between mb-6">
-        <h1 className="text-3xl font-bold mr-6">{t('title')}</h1>
+        <h1 className="text-xl xs:text-3xl font-bold mr-6">{t('title')}</h1>
         {currentUser?.isAdmin && (
           <select
-            className="border rounded p-2"
+            className="w-[110px] xs:w-[200px] rounded-md border border-input bg-background px-3 py-2"
             value={selectedUser}
             onChange={(e) => setSelectedUser(e.target.value)}
           >
diff --git a/components/Dashboard.tsx b/components/Dashboard.tsx
index c30ca0f..8a3a297 100644
--- a/components/Dashboard.tsx
+++ b/components/Dashboard.tsx
@@ -19,9 +19,9 @@ export default function Dashboard() {
   const wishlistItems = wishlist.items
 
   return (
-    <div className="container mx-auto px-4 py-8">
+    <div>
       <div className="flex justify-between items-center mb-6">
-        <h1 className="text-3xl font-bold">{t('title')}</h1>
+        <h1 className="text-xl xs:text-3xl font-bold">{t('title')}</h1>
       </div>
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
         <CoinBalance coinBalance={balance} />
diff --git a/components/HabitCalendar.tsx b/components/HabitCalendar.tsx
index 1aabd53..1106efb 100644
--- a/components/HabitCalendar.tsx
+++ b/components/HabitCalendar.tsx
@@ -43,8 +43,8 @@ export default function HabitCalendar() {
   }, [completedHabitsMap, settings.system.timezone])
 
   return (
-    <div className="container mx-auto px-4 py-6">
-      <h1 className="text-2xl font-semibold mb-6">{t('title')}</h1>
+    <div>
+      <h1 className="text-xl xs:text-3xl font-semibold mb-6">{t('title')}</h1>
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
         <Card>
           <CardHeader>
@@ -157,49 +157,49 @@ export default function HabitCalendar() {
                         date: selectedDateTime
                       }))
                       .map((habit) => {
-                    const completions = getCompletionsForDate({ habit, date: selectedDateTime, timezone: settings.system.timezone })
-                    const isCompleted = completions >= (habit.targetCompletions || 1)
-                    return (
-                      <li key={habit.id} className="flex items-center justify-between gap-2 px-3 py-2 rounded-lg hover:bg-muted/50 transition-colors">
-                        <span className="flex items-center gap-2">
-                          <Linkify>{habit.name}</Linkify>
-                        </span>
-                        <div className="flex items-center gap-2">
-                          <div className="flex items-center gap-2">
-                            {habit.targetCompletions && (
-                              <span className="text-sm text-muted-foreground">
-                                {completions}/{habit.targetCompletions}
-                              </span>
-                            )}
-                            <button
-                              onClick={() => handleCompletePastHabit(habit, selectedDateTime)}
-                              disabled={isCompleted}
-                              className="relative h-4 w-4 hover:opacity-70 transition-opacity disabled:opacity-100"
-                            >
-                              {isCompleted ? (
-                                <CircleCheck className="h-4 w-4 text-green-500" />
-                              ) : (
-                                <div className="relative h-4 w-4">
-                                  <Circle className="absolute h-4 w-4 text-muted-foreground" />
-                                  <div
-                                    className="absolute h-4 w-4 rounded-full overflow-hidden"
-                                    style={{
-                                      background: `conic-gradient(
+                        const completions = getCompletionsForDate({ habit, date: selectedDateTime, timezone: settings.system.timezone })
+                        const isCompleted = completions >= (habit.targetCompletions || 1)
+                        return (
+                          <li key={habit.id} className="flex items-center justify-between gap-2 px-3 py-2 rounded-lg hover:bg-muted/50 transition-colors">
+                            <span className="flex items-center gap-2">
+                              <Linkify>{habit.name}</Linkify>
+                            </span>
+                            <div className="flex items-center gap-2">
+                              <div className="flex items-center gap-2">
+                                {habit.targetCompletions && (
+                                  <span className="text-sm text-muted-foreground">
+                                    {completions}/{habit.targetCompletions}
+                                  </span>
+                                )}
+                                <button
+                                  onClick={() => handleCompletePastHabit(habit, selectedDateTime)}
+                                  disabled={isCompleted}
+                                  className="relative h-4 w-4 hover:opacity-70 transition-opacity disabled:opacity-100"
+                                >
+                                  {isCompleted ? (
+                                    <CircleCheck className="h-4 w-4 text-green-500" />
+                                  ) : (
+                                    <div className="relative h-4 w-4">
+                                      <Circle className="absolute h-4 w-4 text-muted-foreground" />
+                                      <div
+                                        className="absolute h-4 w-4 rounded-full overflow-hidden"
+                                        style={{
+                                          background: `conic-gradient(
                                         currentColor ${(completions / (habit.targetCompletions ?? 1)) * 360}deg,
                                         transparent ${(completions / (habit.targetCompletions ?? 1)) * 360}deg 360deg
                                       )`,
-                                      mask: 'radial-gradient(transparent 50%, black 51%)',
-                                      WebkitMask: 'radial-gradient(transparent 50%, black 51%)'
-                                    }}
-                                  />
-                                </div>
-                              )}
-                            </button>
-                          </div>
-                        </div>
-                      </li>
-                    )
-                    })}
+                                          mask: 'radial-gradient(transparent 50%, black 51%)',
+                                          WebkitMask: 'radial-gradient(transparent 50%, black 51%)'
+                                        }}
+                                      />
+                                    </div>
+                                  )}
+                                </button>
+                              </div>
+                            </div>
+                          </li>
+                        )
+                      })}
                   </ul>
                 </div>
               </div>
diff --git a/components/HabitList.tsx b/components/HabitList.tsx
index fc87019..5c5aea0 100644
--- a/components/HabitList.tsx
+++ b/components/HabitList.tsx
@@ -124,9 +124,9 @@ export default function HabitList() {
 
 
   return (
-    <div className="container mx-auto px-4 py-8">
+    <div>
       <div className="flex justify-between items-center mb-6">
-        <h1 className="text-3xl font-bold">
+        <h1 className="text-xl xs:text-3xl font-bold">
           {t(isTasksView ? 'myTasks' : 'myHabits')}
         </h1>
         <span>
@@ -190,18 +190,18 @@ export default function HabitList() {
             />
           </div>
         ) : (
-            activeHabits.map((habit: Habit) => (
-              <HabitItem
-                key={habit.id}
-                habit={habit}
-                onEdit={() => {
-                  setEditingHabit(habit)
-                  setModalConfig({ isOpen: true, isTask: isTasksView })
-                }}
-                onDelete={() => setDeleteConfirmation({ isOpen: true, habitId: habit.id })}
-              />
-            ))
-          )}
+          activeHabits.map((habit: Habit) => (
+            <HabitItem
+              key={habit.id}
+              habit={habit}
+              onEdit={() => {
+                setEditingHabit(habit)
+                setModalConfig({ isOpen: true, isTask: isTasksView })
+              }}
+              onDelete={() => setDeleteConfirmation({ isOpen: true, habitId: habit.id })}
+            />
+          ))
+        )}
 
         {archivedHabits.length > 0 && (
           <>
diff --git a/components/Layout.tsx b/components/Layout.tsx
index 9a6ed91..9c60494 100644
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -1,3 +1,4 @@
+import { ResponsiveContainer } from 'recharts'
 import ClientWrapper from './ClientWrapper'
 import Header from './Header'
 import Navigation from './Navigation'
@@ -10,9 +11,12 @@ export default function Layout({ children }: { children: React.ReactNode }) {
         <Navigation viewPort='main' />
         <div className="flex-1 flex flex-col">
           <main className="flex-1 overflow-x-hidden overflow-y-auto bg-gray-100 dark:bg-gray-900 relative">
-            <ClientWrapper>
-              {children}
-            </ClientWrapper>
+            {/* responsive container (optimized for mobile) */}
+            <div className="mx-auto px-2 xs:px-4 py-8 max-w-sm xs:max-w-full">
+              <ClientWrapper>
+                {children}
+              </ClientWrapper>
+            </div>
           </main>
           <Navigation viewPort='mobile' />
         </div>
diff --git a/components/WishlistManager.tsx b/components/WishlistManager.tsx
index a3a9b0c..48ac19b 100644
--- a/components/WishlistManager.tsx
+++ b/components/WishlistManager.tsx
@@ -66,7 +66,7 @@ export default function WishlistManager() {
       setTimeout(() => {
         setRecentlyRedeemedId(null)
       }, 3000)
-      
+
       if (item.link) {
         setTimeout(() => {
           const opened = openWindow(item.link!)
@@ -83,9 +83,9 @@ export default function WishlistManager() {
   }
 
   return (
-    <div className="container mx-auto px-4 py-8">
+    <div>
       <div className="flex justify-between items-center mb-6">
-        <h1 className="text-3xl font-bold">{t('title')}</h1>
+        <h1 className="text-xl xs:text-3xl font-bold">{t('title')}</h1>
         <Button onClick={() => setIsModalOpen(true)}>
           <Plus className="mr-2 h-4 w-4" /> {t('addRewardButton')}
         </Button>
@@ -126,7 +126,7 @@ export default function WishlistManager() {
             </div>
           ))
         )}
-        
+
         {archivedItems.length > 0 && (
           <>
             <div className="col-span-1 lg:col-span-2 relative flex items-center my-6">
diff --git a/messages/de.json b/messages/de.json
index 647c52d..e279476 100644
--- a/messages/de.json
+++ b/messages/de.json
@@ -37,7 +37,7 @@
     "dailyHabitsTitle": "Tägliche Gewohnheiten",
     "noHabitsDueTodayMessage": "Heute keine Gewohnheiten fällig. Fügen Sie Gewohnheiten hinzu, um zu beginnen!",
     "wishlistGoalsTitle": "Wunschlisten-Ziele",
-    "redeemableBadgleLabel": "{count}/{total} einlösbar",
+    "redeemableBadgeLabel": "{count}/{total} einlösbar",
     "noWishlistItemsMessage": "Noch keine Elemente auf der Wunschliste. Fügen Sie Ziele hinzu, auf die Sie hinarbeiten können!",
     "readyToRedeemMessage": "Bereit zum Einlösen!",
     "coinsToGoMessage": "Noch {amount} Münzen benötigt",
diff --git a/package.json b/package.json
index adc9c69..3ece558 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "habittrove",
-  "version": "0.2.12",
+  "version": "0.2.13",
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack",
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 85299de..29fb343 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -8,6 +8,17 @@ export default {
     "./app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
+    screens: {
+      '3xs': '320px',
+      '2xs': '375px',
+      'xs': '480px',
+      'sm': '640px',
+      'md': '768px',
+      'lg': '1024px',
+      'xl': '1280px',
+      '2xl': '1536px',
+      '3xl': '1920px'
+    },
     extend: {
       keyframes: {
         celebrate: {