fix: smaller My Valley titles on mobile (#459 follow-up)

[fatherlinux]

Summary

On mobile (max-width: 768px), reduce .my-valley-row-name and .my-valley-detail-name to 0.9rem and trim the favorites/visited row's side padding, so longer titles fit more characters before the ellipsis truncates them.

CSS only (MyValley.css), additive to the existing mobile media block. Follow-up to #459 / #460.

Test plan

• ./run.sh build passes
• Verified at 360px: row + detail titles compute to 14.4px (was ~16px); desktop unchanged
• CI smoke suite

🤖 Generated with Claude Code

[gemini-code-assist]

Code Review

This pull request introduces mobile-specific CSS styles in MyValley.css to display smaller titles and adjust padding on mobile screens. A review comment correctly identifies that the new padding rule for .my-valley-row will be overridden by the base style due to CSS source order, and provides a code suggestion to increase the selector's specificity to fix the issue.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[gemini-code-assist]

Because this media query is defined at the top of the file (lines 97-112) before the base .my-valley-row class (line 129), the base rule's padding: 0.5rem 0.75rem has the same specificity and is declared later in the stylesheet. As a result, the base padding will override this mobile padding rule even on screens smaller than 768px.

To resolve this, we can increase the specificity of the mobile selector so that it correctly overrides the base padding.

Suggested change

	.my-valley-row {
	padding: 0.5rem 0.6rem;
	}
	.my-valley-modal .my-valley-row {
	padding: 0.5rem 0.6rem;
	}