fix responsive (#135)

.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

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

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>

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)}
           >

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} />

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">
+    <div>
-      <h1 className="text-2xl font-semibold mb-6">{t('title')}</h1>
+      <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>

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>

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">
+            {/* 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>

components/WishlistManager.tsx

@@ -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>

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",

package.json

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

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: {