Skip to content

Fix/mobile mood card sizing #337

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Nitya-003 merged 5 commits into from
Jul 23, 2026
Merged

Fix/mobile mood card sizing #337

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
bd4fcc8
feat(analytics): add weekly mood trend, hourly distribution, and stre…
shri8977 Jul 21, 2026
9016cad
feat: add mood-based productivity tips section
shri8977 Jul 21, 2026
4c46a0f
feat: add random mood explorer surprise button
shri8977 Jul 21, 2026
6d57b5f
style: reduce mood selection card size on mobile
shri8977 Jul 23, 2026
a72c315
chore: resolve dependency conflicts after upstream merge
shri8977 Jul 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion frontend/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -446,7 +446,7 @@ useEffect(() => {
/>
) : (
<motion.div
className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-3 md:gap-4 max-w-7xl mx-auto w-full"
className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-2 sm:gap-3 md:gap-4 max-w-7xl mx-auto w-full"
initial="hidden"
animate="visible"
variants={{
Expand Down
6 changes: 3 additions & 3 deletions frontend/components/MoodCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ export function MoodCard({ mood, index, isSelected, onSelect, onDelete, onKeyDow
onHoverStart={() => setIsHovered(true)}
onHoverEnd={() => setIsHovered(false)}
onClick={onSelect}
className="relative aspect-square w-full rounded-3xl p-4 sm:p-6 flex flex-col items-center justify-center cursor-pointer overflow-hidden group backdrop-blur-md border-2"
className="relative aspect-square w-full rounded-2xl sm:rounded-3xl p-2.5 sm:p-4 md:p-6 flex flex-col items-center justify-center gap-1 sm:gap-2 cursor-pointer overflow-hidden group backdrop-blur-md border-2"
style={{
background: cardBg,
borderColor: isSelected ? mood.color : isDark ? 'rgba(255,255,255,0.12)' : 'rgba(255,255,255,0.3)',
Expand Down Expand Up @@ -112,7 +112,7 @@ export function MoodCard({ mood, index, isSelected, onSelect, onDelete, onKeyDow
)}

<motion.div
className="text-4xl sm:text-5xl mb-3 relative z-10 select-none"
className="text-3xl sm:text-4xl md:text-5xl mb-1 sm:mb-2 relative z-10 select-none leading-none"
animate={{
y: isHovered ? -5 : 0,
scale: isHovered ? 1.1 : 1,
Expand All @@ -126,7 +126,7 @@ export function MoodCard({ mood, index, isSelected, onSelect, onDelete, onKeyDow
</motion.div>

<motion.div
className="text-sm sm:text-base font-semibold relative z-10"
className="text-[0.7rem] sm:text-sm md:text-base font-semibold relative z-10 text-center leading-tight px-1"
animate={{
color: labelColor,
scale: isSelected ? 1.05 : 1,
Expand Down
11 changes: 1 addition & 10 deletions frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,7 @@
"docker:dev": "docker compose --profile dev up innerhue-dev",
"docker:prod": "docker compose up innerhue",
"docker:down": "docker compose down",
"prepare": "husky",
"test": "jest",
"test:watch": "jest --watch",
"test:coverage": "jest --coverage"
"prepare": "husky"
},
"dependencies": {
"@fontsource/fraunces": "^5.2.9",
Expand Down Expand Up @@ -104,9 +101,6 @@
"devDependencies": {
"@commitlint/cli": "^21.0.2",
"@commitlint/config-conventional": "^21.0.2",
"@testing-library/jest-dom": "^6.9.1",
"@testing-library/react": "^16.3.2",
"@types/jest": "^30.0.0",
"@types/minimatch": "^3.0.5",
"@types/node": "^20.0.0",
"@types/react": "^19.0.0",
Expand All @@ -117,11 +111,8 @@
"eslint-config-next": "^15.2.0",
"eslint-plugin-react-hooks": "^7.0.1",
"husky": "^9.1.7",
"jest": "^30.4.2",
"jest-environment-jsdom": "^30.4.1",
"postcss": "^8.5.6",
"tailwindcss": "^3.4.0",
"ts-jest": "^29.4.11",
"tsx": "^4.23.1",
"typescript": "^5.2.0"
},
Expand Down
Loading
Loading