Description
When using a single-word site title (e.g., “MyLongBrandName”) that is longer than typical, the layout on smaller screens is pushed outward or overflows horizontally. This negatively affects user experience and site aesthetics on mobile devices.
⸻
Steps to Reproduce
1. Clone the repo and install dependencies.
2. In src/data/site.config.ts (or equivalent), set a long one-word title, e.g. title: "MyLongBrandName".
3. Run the development server and view the site on a narrow/mobile viewport.
4. Observe that the title does not wrap or scale, causing layout overflow or clipping.
⸻
Expected Behavior
• The site title should adapt gracefully on small screens, without pushing the layout horizontally.
• Users with a single long-word brand name should see their title displayed properly.
⸻
Actual Behavior
• The long title extends beyond the viewport width, creating a horizontal scrollbar or cutting off text.
⸻
Possible Solutions
1. Word Wrapping:
• Add overflow-wrap: break-word; or the Tailwind utility class break-words to the title container to allow mid-word breaks.
2. Responsive Font Sizing / Line Breaks:
• Scale down the title font size on smaller screens (e.g., Tailwind text-base sm:text-lg lg:text-2xl), or allow it to break onto multiple lines.
3. Conditional Title Display:
• Introduce a shorter version of the title for smaller screens (e.g., “MyLongBrandName” vs. “OMS”) and switch via responsive utility classes.
4. Hide Text on Mobile, Show Only Logo:
• Let the user rely solely on a recognizable logo on narrow viewports, optionally revealing the text at sm or md breakpoints.
⸻
Proposal
• Provide a Configuration Option in site.config.ts or a similar config file allowing the user to specify:
• title: the full brand name
• shortTitle (optional): an abbreviated or alternate name for smaller screens
• titleBehavior: an enum or setting that determines how the template handles long titles:
• "wrap" (applies word wrapping)
• "responsive" (scales font size, possibly lines up to two lines)
• "shortenOnMobile" (shows shortTitle on smaller breakpoints)
• "hideOnMobile" (displays only the logo for narrow screens)
• The default behavior could be "wrap", ensuring no layout break by default, while advanced users can opt into an alternate approach.
⸻
Additional Context
• This issue primarily affects single-word brand names but could also impact multi-word names if they’re very long.
• A small fix in the CSS or a responsive approach in the header component (e.g., Header.astro, Title.astro) is enough to solve it.
⸻
Thank you! If you have any questions, I’m happy to provide more details or open a PR addressing these options.
Description
When using a single-word site title (e.g., “MyLongBrandName”) that is longer than typical, the layout on smaller screens is pushed outward or overflows horizontally. This negatively affects user experience and site aesthetics on mobile devices.
⸻
Steps to Reproduce
1. Clone the repo and install dependencies.
2. In src/data/site.config.ts (or equivalent), set a long one-word title, e.g. title: "MyLongBrandName".
3. Run the development server and view the site on a narrow/mobile viewport.
4. Observe that the title does not wrap or scale, causing layout overflow or clipping.
⸻
Expected Behavior
• The site title should adapt gracefully on small screens, without pushing the layout horizontally.
• Users with a single long-word brand name should see their title displayed properly.
⸻
Actual Behavior
• The long title extends beyond the viewport width, creating a horizontal scrollbar or cutting off text.
⸻
Possible Solutions
1. Word Wrapping:
• Add overflow-wrap: break-word; or the Tailwind utility class break-words to the title container to allow mid-word breaks.
2. Responsive Font Sizing / Line Breaks:
• Scale down the title font size on smaller screens (e.g., Tailwind text-base sm:text-lg lg:text-2xl), or allow it to break onto multiple lines.
3. Conditional Title Display:
• Introduce a shorter version of the title for smaller screens (e.g., “MyLongBrandName” vs. “OMS”) and switch via responsive utility classes.
4. Hide Text on Mobile, Show Only Logo:
• Let the user rely solely on a recognizable logo on narrow viewports, optionally revealing the text at sm or md breakpoints.
⸻
Proposal
• Provide a Configuration Option in site.config.ts or a similar config file allowing the user to specify:
• title: the full brand name
• shortTitle (optional): an abbreviated or alternate name for smaller screens
• titleBehavior: an enum or setting that determines how the template handles long titles:
• "wrap" (applies word wrapping)
• "responsive" (scales font size, possibly lines up to two lines)
• "shortenOnMobile" (shows shortTitle on smaller breakpoints)
• "hideOnMobile" (displays only the logo for narrow screens)
• The default behavior could be "wrap", ensuring no layout break by default, while advanced users can opt into an alternate approach.
⸻
Additional Context
• This issue primarily affects single-word brand names but could also impact multi-word names if they’re very long.
• A small fix in the CSS or a responsive approach in the header component (e.g., Header.astro, Title.astro) is enough to solve it.
⸻
Thank you! If you have any questions, I’m happy to provide more details or open a PR addressing these options.