What problem will this feature address?
On small screen devices, specifically mobile phones in portrait view, the main landing page lacks sufficient horizontal padding. This causes the content, such as text and other UI elements, to appear very close to the edges of the screen. This results in a cramped and less polished appearance, which can negatively affect readability and the overall user experience. The current layout does not feel fully responsive or optimized for mobile users.
Describe the solution you'd like
I propose increasing the horizontal padding for the main container of the landing page on smaller viewports.
This can be achieved using CSS media queries that target screen widths typical of mobile devices (e.g., max-width: 768px or a more specific mobile breakpoint).
A suggested padding of 1rem (16px) or 1.5rem (24px) on the left and right sides would create a more balanced and visually appealing layout, ensuring content doesn't touch the screen edges. This small change would significantly improve the mobile viewing experience and bring it in line with modern web design standards for responsiveness.
Describe alternatives you've considered
The most direct and standard approach is to adjust the padding with CSS or tailwind classes, as described above.
Other alternatives, such as reducing the font size or significantly altering the layout for mobile, would be more complex and could negatively impact readability and design consistency. Therefore, adjusting the container's padding seems to be the most effective and simplest solution to address this specific issue without introducing other potential problems.
Additional context
To reproduce this issue, you can view the Dokploy landing page on any mobile device or use the browser's developer tools to simulate a mobile viewport (e.g., iPhone SE/XR/14 Pro MAX, Samsung Galaxy S20, or a responsive view with a width of less than 480px).
Will you send a PR to implement it?
Yes
What problem will this feature address?
On small screen devices, specifically mobile phones in portrait view, the main landing page lacks sufficient horizontal padding. This causes the content, such as text and other UI elements, to appear very close to the edges of the screen. This results in a cramped and less polished appearance, which can negatively affect readability and the overall user experience. The current layout does not feel fully responsive or optimized for mobile users.
Describe the solution you'd like
I propose increasing the horizontal padding for the main container of the landing page on smaller viewports.
This can be achieved using CSS media queries that target screen widths typical of mobile devices (e.g., max-width: 768px or a more specific mobile breakpoint).
A suggested padding of 1rem (16px) or 1.5rem (24px) on the left and right sides would create a more balanced and visually appealing layout, ensuring content doesn't touch the screen edges. This small change would significantly improve the mobile viewing experience and bring it in line with modern web design standards for responsiveness.
Describe alternatives you've considered
The most direct and standard approach is to adjust the padding with CSS or tailwind classes, as described above.
Other alternatives, such as reducing the font size or significantly altering the layout for mobile, would be more complex and could negatively impact readability and design consistency. Therefore, adjusting the container's padding seems to be the most effective and simplest solution to address this specific issue without introducing other potential problems.
Additional context
To reproduce this issue, you can view the Dokploy landing page on any mobile device or use the browser's developer tools to simulate a mobile viewport (e.g., iPhone SE/XR/14 Pro MAX, Samsung Galaxy S20, or a responsive view with a width of less than 480px).
Will you send a PR to implement it?
Yes