59c2913d72
Role cards in the new-chat empty state were capped at max-width 200px and never grew, leaving large side gaps in a wide window. Make the cards flex to fill each row (flex: 1 1 240px) and raise min/max width so they get wider and use the available window width while still wrapping to ~2 columns at the default window size.
66 lines
1.9 KiB
CSS
66 lines
1.9 KiB
CSS
/* Layout only — per-card colors are injected inline via Mantine CSS vars. */
|
|
|
|
.container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
/* flex-start keeps the first row reachable when the wrapped cards overflow and
|
|
the container scrolls. With align-content: center, an overflowing top row is
|
|
pushed out of the scrollable area and becomes unreachable. The parent Mantine
|
|
Center still vertically centers the whole block when it fits. */
|
|
align-content: flex-start;
|
|
gap: 10px;
|
|
/* Cap the height so a large number of roles scrolls instead of blowing out
|
|
the empty chat area. */
|
|
max-height: 100%;
|
|
overflow-y: auto;
|
|
padding: 8px;
|
|
}
|
|
|
|
.card {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 4px;
|
|
/* Grow to fill the row so cards use the available window width instead of
|
|
leaving large side gaps; the flex-basis sets how many fit per row before
|
|
wrapping (≈2 columns at the default window width, more as it widens). */
|
|
flex: 1 1 240px;
|
|
min-width: 200px;
|
|
max-width: 360px;
|
|
min-height: 90px;
|
|
padding: 12px 10px;
|
|
border-radius: var(--mantine-radius-md);
|
|
border: 2px solid transparent;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
transition:
|
|
transform 120ms ease,
|
|
box-shadow 120ms ease,
|
|
border-color 120ms ease;
|
|
}
|
|
|
|
.card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--mantine-shadow-sm);
|
|
}
|
|
|
|
.emoji {
|
|
font-size: 22px;
|
|
line-height: 1;
|
|
}
|
|
|
|
/* The description: small and slightly muted, inheriting the card's color. We
|
|
reduce opacity instead of using Mantine's `c="dimmed"` so it doesn't clash
|
|
with the card's inline color. */
|
|
.description {
|
|
opacity: 0.8;
|
|
line-height: 1.3;
|
|
/* Break long unbreakable tokens (URLs, long foreign words) in the
|
|
admin-configured description so they wrap instead of overflowing the card
|
|
width now that the line clamp no longer caps the text. */
|
|
overflow-wrap: anywhere;
|
|
}
|