From eb2ee05571c15cf195a78e3544e5feea7b886999 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matth=C3=A4us=20Mayer?= <7984982+theMattCode@users.noreply.github.com> Date: Fri, 26 Jun 2026 07:40:12 +0200 Subject: [PATCH 1/8] Constant height for Breadcrumb #6 --- apps/cockpit/src/components/Breadcrumb/Breadcrumb.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/cockpit/src/components/Breadcrumb/Breadcrumb.tsx b/apps/cockpit/src/components/Breadcrumb/Breadcrumb.tsx index 898449c..e47f63e 100644 --- a/apps/cockpit/src/components/Breadcrumb/Breadcrumb.tsx +++ b/apps/cockpit/src/components/Breadcrumb/Breadcrumb.tsx @@ -16,7 +16,7 @@ export function Breadcrumb() { const matches = useMatches().filter((m) => m.staticData?.crumb); return ( -
+
{matches.map((item, index) => { if (!item.staticData?.crumb) return null; return ( From 366edc9ca903b80cfd9115b841ead21591a11f3a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matth=C3=A4us=20Mayer?= <7984982+theMattCode@users.noreply.github.com> Date: Fri, 26 Jun 2026 07:43:30 +0200 Subject: [PATCH 2/8] Rename: give room for the real ContentLayout #6 --- .../ContentLayout.tsx => ContentArea/ContentArea.tsx} | 2 +- apps/cockpit/src/routes/__root.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) rename apps/cockpit/src/components/{ContentLayout/ContentLayout.tsx => ContentArea/ContentArea.tsx} (88%) diff --git a/apps/cockpit/src/components/ContentLayout/ContentLayout.tsx b/apps/cockpit/src/components/ContentArea/ContentArea.tsx similarity index 88% rename from apps/cockpit/src/components/ContentLayout/ContentLayout.tsx rename to apps/cockpit/src/components/ContentArea/ContentArea.tsx index 87e722b..f7644f8 100644 --- a/apps/cockpit/src/components/ContentLayout/ContentLayout.tsx +++ b/apps/cockpit/src/components/ContentArea/ContentArea.tsx @@ -1,7 +1,7 @@ import { type PropsWithChildren } from 'react'; import { Breadcrumb } from '@/components/Breadcrumb/Breadcrumb.tsx'; -export function ContentLayout({ children }: PropsWithChildren) { +export function ContentArea({ children }: PropsWithChildren) { return (
diff --git a/apps/cockpit/src/routes/__root.tsx b/apps/cockpit/src/routes/__root.tsx index 4b4b266..b2ad656 100644 --- a/apps/cockpit/src/routes/__root.tsx +++ b/apps/cockpit/src/routes/__root.tsx @@ -3,7 +3,7 @@ import { createRootRoute, HeadContent, Scripts } from '@tanstack/react-router'; import appCss from '../styles.css?url'; import { PageLayout } from '@/components/PageLayout/PageLayout.tsx'; import { Section } from '@/components/Section/Section.tsx'; -import { ContentLayout } from '@/components/ContentLayout/ContentLayout.tsx'; +import { ContentArea } from '@/components/ContentArea/ContentArea.tsx'; import { Navigation } from '@/components/Navigation/Navigation.tsx'; import { MdOutlineHome as HomeIcon } from 'react-icons/md'; @@ -33,7 +33,7 @@ function RootDocument({ children }: PropsWithChildren) { - {children} + {children} {Devtools ? : null} From e4c5f78841b78014e1e3ada0a7b8bb3fc16a126f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matth=C3=A4us=20Mayer?= <7984982+theMattCode@users.noreply.github.com> Date: Fri, 26 Jun 2026 07:48:37 +0200 Subject: [PATCH 3/8] Stub GridLayout and apply to index route #6 --- apps/cockpit/src/components/ContentLayout/GridLayout.tsx | 5 +++++ apps/cockpit/src/routes/index.tsx | 5 +++-- 2 files changed, 8 insertions(+), 2 deletions(-) create mode 100644 apps/cockpit/src/components/ContentLayout/GridLayout.tsx diff --git a/apps/cockpit/src/components/ContentLayout/GridLayout.tsx b/apps/cockpit/src/components/ContentLayout/GridLayout.tsx new file mode 100644 index 0000000..492277d --- /dev/null +++ b/apps/cockpit/src/components/ContentLayout/GridLayout.tsx @@ -0,0 +1,5 @@ +import type { PropsWithChildren } from 'react'; + +export function GridLayout({ children }: PropsWithChildren) { + return <>{children}; +} diff --git a/apps/cockpit/src/routes/index.tsx b/apps/cockpit/src/routes/index.tsx index 43db789..4b8b268 100644 --- a/apps/cockpit/src/routes/index.tsx +++ b/apps/cockpit/src/routes/index.tsx @@ -1,6 +1,7 @@ import { createFileRoute } from '@tanstack/react-router'; import { WeatherWidget } from '@/domain/weather/WeatherWidget.tsx'; import { LOCATION_MOESSINGEN, LOCATION_OBERNHEIM } from '@/domain/weather/model/model.ts'; +import { GridLayout } from '@/components/ContentLayout/GridLayout.tsx'; export const Route = createFileRoute('/')({ component: App, @@ -8,12 +9,12 @@ export const Route = createFileRoute('/')({ function App() { return ( - <> + {/* */} - + ); } From 63f472bce21341586474fb22c50da679af4f792b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matth=C3=A4us=20Mayer?= <7984982+theMattCode@users.noreply.github.com> Date: Thu, 2 Jul 2026 07:52:24 +0200 Subject: [PATCH 4/8] Implement solid grid model See example on index route. #6 --- .../components/ContentArea/ContentArea.tsx | 4 +-- .../components/ContentLayout/GridLayout.tsx | 6 +++- .../src/components/Section/Section.tsx | 14 ++++++-- .../components/Transition/FadeTransition.tsx | 7 +++- .../src/domain/weather/WeatherWidget.tsx | 32 ++++++++++++++----- .../cockpit/src/domain/weather/model/model.ts | 8 +++++ .../src/routes/finance/transactions.tsx | 7 +++- apps/cockpit/src/routes/index.tsx | 21 +++++++----- apps/cockpit/src/styles.css | 7 ++-- 9 files changed, 80 insertions(+), 26 deletions(-) diff --git a/apps/cockpit/src/components/ContentArea/ContentArea.tsx b/apps/cockpit/src/components/ContentArea/ContentArea.tsx index f7644f8..184c7e6 100644 --- a/apps/cockpit/src/components/ContentArea/ContentArea.tsx +++ b/apps/cockpit/src/components/ContentArea/ContentArea.tsx @@ -3,8 +3,8 @@ import { Breadcrumb } from '@/components/Breadcrumb/Breadcrumb.tsx'; export function ContentArea({ children }: PropsWithChildren) { return ( -
-
+
+
diff --git a/apps/cockpit/src/components/ContentLayout/GridLayout.tsx b/apps/cockpit/src/components/ContentLayout/GridLayout.tsx index 492277d..5078ed3 100644 --- a/apps/cockpit/src/components/ContentLayout/GridLayout.tsx +++ b/apps/cockpit/src/components/ContentLayout/GridLayout.tsx @@ -1,5 +1,9 @@ import type { PropsWithChildren } from 'react'; export function GridLayout({ children }: PropsWithChildren) { - return <>{children}; + return ( +
+ {children} +
+ ); } diff --git a/apps/cockpit/src/components/Section/Section.tsx b/apps/cockpit/src/components/Section/Section.tsx index d29584b..ca51bb6 100644 --- a/apps/cockpit/src/components/Section/Section.tsx +++ b/apps/cockpit/src/components/Section/Section.tsx @@ -1,8 +1,18 @@ import type { PropsWithChildren } from 'react'; +import { cx } from '@/utils/styles.ts'; -export function Section({ children }: PropsWithChildren) { +interface Props { + className?: string; +} + +export function Section({ children, className }: PropsWithChildren) { return ( -
+
{children}
); diff --git a/apps/cockpit/src/components/Transition/FadeTransition.tsx b/apps/cockpit/src/components/Transition/FadeTransition.tsx index f4a0caf..09a34de 100644 --- a/apps/cockpit/src/components/Transition/FadeTransition.tsx +++ b/apps/cockpit/src/components/Transition/FadeTransition.tsx @@ -47,7 +47,12 @@ export function FadeTransition({ children, transitionKey, durationMs = 300, clas return (
{visibleChildren} diff --git a/apps/cockpit/src/domain/weather/WeatherWidget.tsx b/apps/cockpit/src/domain/weather/WeatherWidget.tsx index 76216dd..b54e770 100644 --- a/apps/cockpit/src/domain/weather/WeatherWidget.tsx +++ b/apps/cockpit/src/domain/weather/WeatherWidget.tsx @@ -1,9 +1,8 @@ -import { FadeTransition } from '@/components/Transition/FadeTransition.tsx'; -import { Section } from '@/components/Section/Section.tsx'; import { WeatherCurrentSummary } from '@/domain/weather/WeatherCurrentSummary.tsx'; import type { WeatherDataLoaded, WeatherLocation } from '@/domain/weather/model/model.ts'; import { Header } from '@/domain/weather/Header.tsx'; import { useWeatherSnapshot } from '@/domain/weather/model/useWeatherSnapshot.ts'; +import { FadeTransition } from '@/components/Transition/FadeTransition.tsx'; type WeatherWidgetProps = { location: WeatherLocation; @@ -14,12 +13,9 @@ export function WeatherWidget({ location }: WeatherWidgetProps) { return ( - {weather.status === 'error' &&
{weather.errorMessage}
} - {weather.status === 'loaded' && ( -
- -
- )} + {weather.status === 'loading' && } + {weather.status === 'error' && weather.errorMessage} + {weather.status === 'loaded' && } ); } @@ -37,3 +33,23 @@ function WeatherWidgetContent({ location, weather }: WeatherWidgetContentProps)
); } + +function Skeleton() { + return ( +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ); +} diff --git a/apps/cockpit/src/domain/weather/model/model.ts b/apps/cockpit/src/domain/weather/model/model.ts index 9908e64..ae2bdfa 100644 --- a/apps/cockpit/src/domain/weather/model/model.ts +++ b/apps/cockpit/src/domain/weather/model/model.ts @@ -22,6 +22,14 @@ export const LOCATION_OBERNHEIM: WeatherLocation = { timezone: 'Europe/Berlin', }; +export const LOCATION_TUEBINGEN: WeatherLocation = { + id: 'tuebingen', + label: 'Tübingen', + latitude: 48.31, + longitude: 9.3, + timezone: 'Europe/Berlin', +}; + export interface HourlyTemperaturePoint { timeIso: string; temperatureC: number; diff --git a/apps/cockpit/src/routes/finance/transactions.tsx b/apps/cockpit/src/routes/finance/transactions.tsx index 1e0b92d..0260e64 100644 --- a/apps/cockpit/src/routes/finance/transactions.tsx +++ b/apps/cockpit/src/routes/finance/transactions.tsx @@ -1,5 +1,6 @@ import { createFileRoute } from '@tanstack/react-router'; import { Transactions } from '@/domain/finance/transactions/Transactions.tsx'; +import { GridLayout } from '@/components/ContentLayout/GridLayout.tsx'; export const Route = createFileRoute('/finance/transactions')({ component: TransactionsRoute, @@ -9,5 +10,9 @@ export const Route = createFileRoute('/finance/transactions')({ }); function TransactionsRoute() { - return ; + return ( + + + + ); } diff --git a/apps/cockpit/src/routes/index.tsx b/apps/cockpit/src/routes/index.tsx index 4b8b268..f7295fe 100644 --- a/apps/cockpit/src/routes/index.tsx +++ b/apps/cockpit/src/routes/index.tsx @@ -1,20 +1,25 @@ import { createFileRoute } from '@tanstack/react-router'; import { WeatherWidget } from '@/domain/weather/WeatherWidget.tsx'; -import { LOCATION_MOESSINGEN, LOCATION_OBERNHEIM } from '@/domain/weather/model/model.ts'; +import { LOCATION_MOESSINGEN, LOCATION_OBERNHEIM, LOCATION_TUEBINGEN } from '@/domain/weather/model/model.ts'; import { GridLayout } from '@/components/ContentLayout/GridLayout.tsx'; +import { Section } from '@/components/Section/Section.tsx'; export const Route = createFileRoute('/')({ - component: App, + component: Overview, }); -function App() { +function Overview() { return ( - - - {/* - - */} +
+ +
+
+ +
+
+ +
); } diff --git a/apps/cockpit/src/styles.css b/apps/cockpit/src/styles.css index d64eb99..d1a1edd 100644 --- a/apps/cockpit/src/styles.css +++ b/apps/cockpit/src/styles.css @@ -11,6 +11,7 @@ --color-section-border: #d6dde6; --color-sem-positive: oklch(59.6% 0.145 163.225); --color-sem-negative: oklch(58.6% 0.253 17.585); + --color-skeleton: #e6e6e6; } @media (prefers-color-scheme: dark) { @@ -25,14 +26,14 @@ --color-section-border: #272727; --color-sem-positive: oklch(84.5% 0.143 164.978); --color-sem-negative: oklch(71.2% 0.194 13.428); + --color-skeleton: #272727; } } body { @apply m-0 bg-(--color-bg) text-(--color-txt) min-h-screen w-full overflow-hidden; - font-family: - -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', - 'Helvetica Neue', sans-serif; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', + 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } From 35e0e9c0fb7d6d49c58b1543634302c2dd46dede Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matth=C3=A4us=20Mayer?= <7984982+theMattCode@users.noreply.github.com> Date: Thu, 2 Jul 2026 07:55:50 +0200 Subject: [PATCH 5/8] Fix Transactions layout #6 --- .../KPI/KPISection.tsx/KPISection.tsx | 2 +- .../finance/transactions/Transactions.tsx | 63 ++++++++----------- 2 files changed, 28 insertions(+), 37 deletions(-) diff --git a/apps/cockpit/src/components/KPI/KPISection.tsx/KPISection.tsx b/apps/cockpit/src/components/KPI/KPISection.tsx/KPISection.tsx index 88a69d8..7bb8145 100644 --- a/apps/cockpit/src/components/KPI/KPISection.tsx/KPISection.tsx +++ b/apps/cockpit/src/components/KPI/KPISection.tsx/KPISection.tsx @@ -9,7 +9,7 @@ interface Props { export function KPISection({ label, value, tone }: Props) { return ( -
+
{label}
- {data && ( - <> - {data?.summary && ( - - - - )} - {error && ( -
- {error.message} -
- )} - - {loading &&

Loading transactions...

} - {/* Transaction list should have kind of toolbar + <> + {data?.summary && } + {error && ( +
+ {error.message} +
+ )} + + {loading &&

Loading transactions...

} + {/* Transaction list should have kind of toolbar setDateRangeMonth(event.target.value)} /> */} - {data && } - - )} -
+ {data && } + ); } @@ -175,7 +166,7 @@ function TransactionForm({ }: TransactionFormProps) { const updateForm = (patch: Partial) => onChange({ ...form, ...patch }); return ( -
+
{ @@ -274,7 +265,7 @@ function TransactionList({ } return ( -
+
@@ -356,7 +347,7 @@ function TransactionCard({ onEdit: (transaction: Transaction) => void; }) { return ( -
+
From 368b6388ce113cbc8f6ec8622531726840d77970 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matth=C3=A4us=20Mayer?= <7984982+theMattCode@users.noreply.github.com> Date: Thu, 2 Jul 2026 17:43:29 +0200 Subject: [PATCH 6/8] Fix location #6 --- apps/cockpit/src/routes/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/cockpit/src/routes/index.tsx b/apps/cockpit/src/routes/index.tsx index f7295fe..5cb3d7d 100644 --- a/apps/cockpit/src/routes/index.tsx +++ b/apps/cockpit/src/routes/index.tsx @@ -11,13 +11,13 @@ export const Route = createFileRoute('/')({ function Overview() { return ( -
+
-
+
-
+
From dd762b753e7b2341b1a304f3018e24abd3c077a4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matth=C3=A4us=20Mayer?= <7984982+theMattCode@users.noreply.github.com> Date: Thu, 2 Jul 2026 17:57:06 +0200 Subject: [PATCH 7/8] Use a 2/4/6/12 grid layout #6 --- .../components/ContentLayout/GridLayout.tsx | 6 +----- .../src/components/Section/Section.tsx | 11 +---------- .../components/Transition/FadeTransition.tsx | 2 +- .../finance/transactions/Transactions.tsx | 17 +++++++++-------- .../src/domain/weather/WeatherWidget.tsx | 19 ++++++++----------- .../cockpit/src/domain/weather/model/model.ts | 4 ++-- apps/cockpit/src/routes/index.tsx | 6 +++--- apps/cockpit/src/styles.css | 8 ++++++++ 8 files changed, 33 insertions(+), 40 deletions(-) diff --git a/apps/cockpit/src/components/ContentLayout/GridLayout.tsx b/apps/cockpit/src/components/ContentLayout/GridLayout.tsx index 5078ed3..577b288 100644 --- a/apps/cockpit/src/components/ContentLayout/GridLayout.tsx +++ b/apps/cockpit/src/components/ContentLayout/GridLayout.tsx @@ -1,9 +1,5 @@ import type { PropsWithChildren } from 'react'; export function GridLayout({ children }: PropsWithChildren) { - return ( -
- {children} -
- ); + return
{children}
; } diff --git a/apps/cockpit/src/components/Section/Section.tsx b/apps/cockpit/src/components/Section/Section.tsx index ca51bb6..fc63796 100644 --- a/apps/cockpit/src/components/Section/Section.tsx +++ b/apps/cockpit/src/components/Section/Section.tsx @@ -6,14 +6,5 @@ interface Props { } export function Section({ children, className }: PropsWithChildren) { - return ( -
- {children} -
- ); + return
{children}
; } diff --git a/apps/cockpit/src/components/Transition/FadeTransition.tsx b/apps/cockpit/src/components/Transition/FadeTransition.tsx index 09a34de..987d332 100644 --- a/apps/cockpit/src/components/Transition/FadeTransition.tsx +++ b/apps/cockpit/src/components/Transition/FadeTransition.tsx @@ -48,7 +48,7 @@ export function FadeTransition({ children, transitionKey, durationMs = 300, clas return (
{data?.summary && } {error && ( -
+
{error.message}
)} + - {loading &&

Loading transactions...

} + {loading &&

Loading transactions...

} {/* Transaction list should have kind of toolbar setDateRangeMonth(event.target.value)} /> @@ -166,7 +167,7 @@ function TransactionForm({ }: TransactionFormProps) { const updateForm = (patch: Partial) => onChange({ ...form, ...patch }); return ( -
+
{ @@ -265,7 +266,7 @@ function TransactionList({ } return ( -
+
@@ -347,7 +348,7 @@ function TransactionCard({ onEdit: (transaction: Transaction) => void; }) { return ( -
+
diff --git a/apps/cockpit/src/domain/weather/WeatherWidget.tsx b/apps/cockpit/src/domain/weather/WeatherWidget.tsx index b54e770..2c0e1eb 100644 --- a/apps/cockpit/src/domain/weather/WeatherWidget.tsx +++ b/apps/cockpit/src/domain/weather/WeatherWidget.tsx @@ -2,7 +2,6 @@ import { WeatherCurrentSummary } from '@/domain/weather/WeatherCurrentSummary.ts import type { WeatherDataLoaded, WeatherLocation } from '@/domain/weather/model/model.ts'; import { Header } from '@/domain/weather/Header.tsx'; import { useWeatherSnapshot } from '@/domain/weather/model/useWeatherSnapshot.ts'; -import { FadeTransition } from '@/components/Transition/FadeTransition.tsx'; type WeatherWidgetProps = { location: WeatherLocation; @@ -11,13 +10,11 @@ type WeatherWidgetProps = { export function WeatherWidget({ location }: WeatherWidgetProps) { const weather = useWeatherSnapshot(location); - return ( - - {weather.status === 'loading' && } - {weather.status === 'error' && weather.errorMessage} - {weather.status === 'loaded' && } - - ); + if (weather.status === 'loading') return ; + + if (weather.status === 'error') return weather.errorMessage; + + return ; } type WeatherWidgetContentProps = { @@ -38,12 +35,12 @@ function Skeleton() { return (
-
+
-
-
+
+
diff --git a/apps/cockpit/src/domain/weather/model/model.ts b/apps/cockpit/src/domain/weather/model/model.ts index ae2bdfa..00279c5 100644 --- a/apps/cockpit/src/domain/weather/model/model.ts +++ b/apps/cockpit/src/domain/weather/model/model.ts @@ -25,8 +25,8 @@ export const LOCATION_OBERNHEIM: WeatherLocation = { export const LOCATION_TUEBINGEN: WeatherLocation = { id: 'tuebingen', label: 'Tübingen', - latitude: 48.31, - longitude: 9.3, + latitude: 48.52, + longitude: 9.06, timezone: 'Europe/Berlin', }; diff --git a/apps/cockpit/src/routes/index.tsx b/apps/cockpit/src/routes/index.tsx index 5cb3d7d..23ad53b 100644 --- a/apps/cockpit/src/routes/index.tsx +++ b/apps/cockpit/src/routes/index.tsx @@ -11,13 +11,13 @@ export const Route = createFileRoute('/')({ function Overview() { return ( -
+
-
+
-
+
diff --git a/apps/cockpit/src/styles.css b/apps/cockpit/src/styles.css index d1a1edd..fecad79 100644 --- a/apps/cockpit/src/styles.css +++ b/apps/cockpit/src/styles.css @@ -54,3 +54,11 @@ code { .animate-rainbow { animation: rainbow 30s linear infinite; } + +.grid-layout { + @apply grid gap-4 grid-cols-2 md:grid-cols-4 lg:grid-cols-6 2xl:grid-cols-12; +} + +.section-base { + @apply transition-all self-start w-full h-full bg-(--color-bg) flex p-4 rounded-lg border border-(--color-section-border) @container +} From 5cf9cc05327b222d5f17243d5fac8a0e5988e59d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matth=C3=A4us=20Mayer?= <7984982+theMattCode@users.noreply.github.com> Date: Thu, 2 Jul 2026 17:59:12 +0200 Subject: [PATCH 8/8] lint-fix #6 --- apps/cockpit/src/styles.css | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/apps/cockpit/src/styles.css b/apps/cockpit/src/styles.css index fecad79..c4ec04d 100644 --- a/apps/cockpit/src/styles.css +++ b/apps/cockpit/src/styles.css @@ -32,8 +32,9 @@ body { @apply m-0 bg-(--color-bg) text-(--color-txt) min-h-screen w-full overflow-hidden; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', - 'Helvetica Neue', sans-serif; + font-family: + -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', + 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @@ -60,5 +61,5 @@ code { } .section-base { - @apply transition-all self-start w-full h-full bg-(--color-bg) flex p-4 rounded-lg border border-(--color-section-border) @container + @apply transition-all self-start w-full h-full bg-(--color-bg) flex p-4 rounded-lg border border-(--color-section-border) @container; }