Improve UI for manager.html: Reduce Dead Space and Optimize Grid Layout

[nipwd]

Welcome!

• Yes, I have searched for similar requests on GitHub and found none.

What type of feature?

Functionality

What is the motivation for the request?

This request suggests a visual improvement to the UI of manager.html by optimizing the grid layout for instance cards. These changes aim to reduce the dead space on the instance cards and make the interface more visually compact and responsive across different screen sizes. The adjustments force the number of grid columns and set consistent spacing between elements to ensure a better user experience.

Changes:
Adjusted font size for instance card text to make it smaller for a more compact look.
Forced grid column counts at various screen widths to maintain a consistent layout.
Reduced the gap between elements in the grid layout to minimize empty space.
Ensured the grid display is forced for proper layout structure.

Usage Examples

I believe these changes improve the overall look of the interface by tightening up the design, making the UI more visually appealing while keeping it functional across different screen sizes. This removes excessive white space and ensures a more consistent, readable layout.

How should the feature be developed?

/* Apply changes to the elements within the grid /
.flex.flex-col.rounded-lg.border.bg-card.text-card-foreground.shadow-sm {
font-size: 1rem !important; / Reduce text size within each card */
}

/* Force the number of columns at different screen sizes */
@media (min-width: 10px) {
.xl:grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
}

@media (min-width: 10px) {
.lg:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
}

@media (min-width: 10px) {
.md:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}

@media (min-width: 10px) {
.sm:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}

/* Force gap (spacing between grid elements) */
.gap-6 {
gap: 0.5rem !important;
}

/* Force grid display */
.grid {
display: inline-grid !important;
}

Additional Notes

No response