Devlog 16: Dashboard Layout Fixes

Fixing Layout and Compression Issues

Compressed Card Icons

• Problem: The card icons shrank and deformed when the screen size changed.
• Solution: Added flex-shrink: 0; to the icon class to force them to keep their correct size.

Cards Stacking Vertically

• Problem: The tool cards unexpectedly stacked into a narrow, single column right in the middle of the screen. Even though there was plenty of empty space on both sides of the desktop browser, the grid refused to expand horizontally and display the cards side-by-side.
• Troubleshooting:
  • The grid’s layout formula was correctly set to repeat(auto-fit, minmax(250px, 1fr)), which should have allowed multiple columns.
  • However, the parent container (.home-container) was set to display: flex with align-items: center. In a vertical Flexbox layout, this alignment forces child elements like the grid to shrink to their absolute minimum width based on content, instead of filling the screen.
  • To make matters worse, a strict max-width: 300px; was hardcoded onto the .tool-grid. Since two cards plus their gaps required at least 525px to sit side-by-side, the 300px restriction made it mathematically impossible for the browser to create a second column.
• Solution:
  • Removed the restrictive max-width: 300px; from the grid and replaced it with a generous max-width: 1200px; to allow proper breathing room on large screens.
  • Added width: 100%; to the grid class, forcing the grid container to break out of the Flexbox compression and stretch completely across the parent container.
  • This allowed the responsive auto-fit engine to finally see the available width and cleanly arrange the cards into multiple columns.

Fixing Grid Spacing and Syntax Errors

Layout Breaking Off-Screen

• Problem: The grid expanded past the screen edges and cut off the card content.
• Solution: Added box-sizing: border-box; to the main container so that padding is counted inside the total width.

Broken Units and Side Scrollbars

• Problem: An annoying horizontal scrollbar appeared at the bottom of the page.
• Solution: Fixed a typo where width: 100sww; was written instead of 100svw, and added body { margin: 0; } to clear default browser spaces.