Badget icon indicating copy to clipboard operation
Badget copied to clipboard

Feature: Footer on /Dashboard alot of white space

Open Codehagen opened this issue 1 year ago • 5 comments
trafficstars

Title

There is an issue with the footer on the /dashboard page of our application. Currently, the footer the footer is too big and blocks some of the screen.

Improvement Description

The footer on the /dashboard page is currently oversized, encroaching upon the usable screen space and potentially obscuring content. A redesign or adjustment is necessary to ensure that the footer maintains an appropriate size without compromising the user interface and experience.

Additional Context

The screenshot above shows the current state of the footer on the /dashboard page where it is not properly aligned. This issue is visible when the content above does not fill the viewport height.

image

Codehagen avatar Jan 02 '24 05:01 Codehagen

Footer seems fine and have no extra vertical spacing as mentioned in screenshot, but there is other UI issue with footer especially on large screen like 32 inch display.

Dashboard and its components covering full width. It is ok, but now see footer. Screenshot 2024-01-23 at 3 59 28 PM

Footer issue - Footer has a large spacing on x-axis Screenshot 2024-01-23 at 4 00 46 PM

veerbal1 avatar Jan 23 '24 10:01 veerbal1

Can I work on this issue? @meglerhagen

shaikahmadnawaz avatar Jan 23 '24 18:01 shaikahmadnawaz

Yes, if not @veerbal1 would like to go into it? Ill assign you both :)

Codehagen avatar Jan 23 '24 19:01 Codehagen

Yes, if not @veerbal1 would like to go into it? Ill assign you both :)

Okay 👍

shaikahmadnawaz avatar Jan 23 '24 19:01 shaikahmadnawaz

It is simple to fix but I need to first discuss a little about it. I think the issue is not with our footer as it has spacing around its X-axis, but the issue is with the central content body which is spreading wide from left to right and stretching content on large screens (3840 x 2160 pixels). I suggest there should be a max-width for content under the header, so it cannot extend beyond a certain limit and have better readability. I also wanted to know how others tackle the same issue for larger screens like Vercel, ShadCN-UI, and TikTok. I found they are also using max-width in their content.

ProjectX - Content Stretching Horizontally

projectx-eight-gilt vercel app_dashboard_transactions

Vercel - Content has max-width and center-aligned vercel com_dashboard

ShadCN UI - Content has max-width and center-aligned ui shadcn com_examples_mail (1)

What are your thoughts on it?

veerbal1 avatar Jan 24 '24 07:01 veerbal1