Compare commits

..

1 Commits

Author SHA1 Message Date
BOHA
4674ff3389 fix(dashboard): equal-height cards — stretch + fill instead of ragged
The dashboard content grids used alignItems:"start", so cards in a row sized to
their own content (ragged bottoms). Switch to alignItems:"stretch" so each row
shares one height, and make the wrapped cards actually fill the cell:

- DashProfile / DashSessions: motion-div + Card height:100% (the inner card was
  shorter than its stretched cell).
- Right column (Aktivní projekty + Nabídky): cards flex:1 so the stacked pair
  fills the column to match the neighbouring single cards.

CSS-only; no logic change. tsc clean, lint 0, 669 tests pass. Verified live via
Playwright (3-col row cells equal at 607; bottom 2-col cards equal at 257).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-13 21:34:17 +02:00
5 changed files with 23 additions and 11 deletions

4
package-lock.json generated
View File

@@ -1,12 +1,12 @@
{ {
"name": "app-ts", "name": "app-ts",
"version": "2.4.37", "version": "2.4.38",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "app-ts", "name": "app-ts",
"version": "2.4.37", "version": "2.4.38",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"@anthropic-ai/sdk": "^0.102.0", "@anthropic-ai/sdk": "^0.102.0",

View File

@@ -1,6 +1,6 @@
{ {
"name": "app-ts", "name": "app-ts",
"version": "2.4.37", "version": "2.4.38",
"description": "", "description": "",
"main": "dist/server.js", "main": "dist/server.js",
"scripts": { "scripts": {

View File

@@ -262,8 +262,9 @@ export default function DashProfile({
initial={reduce ? false : { opacity: 0, y: 12 }} initial={reduce ? false : { opacity: 0, y: 12 }}
animate={reduce ? undefined : { opacity: 1, y: 0 }} animate={reduce ? undefined : { opacity: 1, y: 0 }}
transition={{ duration: 0.25, delay: 0.15 }} transition={{ duration: 0.25, delay: 0.15 }}
style={{ height: "100%" }}
> >
<Card> <Card sx={{ height: "100%" }}>
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",

View File

@@ -132,8 +132,9 @@ export default function DashSessions() {
initial={reduce ? false : { opacity: 0, y: 12 }} initial={reduce ? false : { opacity: 0, y: 12 }}
animate={reduce ? undefined : { opacity: 1, y: 0 }} animate={reduce ? undefined : { opacity: 1, y: 0 }}
transition={{ duration: 0.25, delay: 0.15 }} transition={{ duration: 0.25, delay: 0.15 }}
style={{ height: "100%" }}
> >
<Card sx={{ display: "flex", flexDirection: "column" }}> <Card sx={{ display: "flex", flexDirection: "column", height: "100%" }}>
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",

View File

@@ -348,7 +348,9 @@ export default function Dashboard() {
display: "grid", display: "grid",
gridTemplateColumns: { xs: "1fr", lg: "1fr 1fr 1fr" }, gridTemplateColumns: { xs: "1fr", lg: "1fr 1fr 1fr" },
gap: 3, gap: 3,
alignItems: "start", // stretch (not start) so the cards in a row share one height —
// even bottoms instead of ragged content-height cards.
alignItems: "stretch",
mb: 3, mb: 3,
}} }}
> >
@@ -360,10 +362,18 @@ export default function Dashboard() {
<DashAttendanceToday attendance={dashData?.attendance ?? null} /> <DashAttendanceToday attendance={dashData?.attendance ?? null} />
)} )}
{/* Pravy sloupec: projekty + nabidky */} {/* Pravy sloupec: projekty + nabidky — both grow so the stacked
<Box sx={{ display: "flex", flexDirection: "column", gap: 3 }}> cards fill the column to match the neighbouring cards' height. */}
<Box
sx={{
display: "flex",
flexDirection: "column",
gap: 3,
height: "100%",
}}
>
{dashData?.projects && ( {dashData?.projects && (
<Card sx={{ display: "flex", flexDirection: "column" }}> <Card sx={{ display: "flex", flexDirection: "column", flex: 1 }}>
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",
@@ -421,7 +431,7 @@ export default function Dashboard() {
)} )}
{dashData?.offers && ( {dashData?.offers && (
<Card sx={{ display: "flex", flexDirection: "column" }}> <Card sx={{ display: "flex", flexDirection: "column", flex: 1 }}>
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",
@@ -498,7 +508,7 @@ export default function Dashboard() {
display: "grid", display: "grid",
gridTemplateColumns: { xs: "1fr", lg: "1fr 1fr" }, gridTemplateColumns: { xs: "1fr", lg: "1fr 1fr" },
gap: 3, gap: 3,
alignItems: "start", alignItems: "stretch",
}} }}
> >
<DashProfile <DashProfile