Scrollable-Card-Styles ins Portal synchronisieren

public/assets/styleguide.upstream.css

@@ -175,6 +175,8 @@
   --layout-object-card-mobile-width: var(--dimension-object-card-mobile-width);
   --layout-object-card-mobile-height: var(--dimension-object-card-mobile-height);
   --layout-object-card-desktop-breakpoint: var(--dimension-object-card-desktop-breakpoint);
+  --layout-scrollable-card-width: var(--dimension-scrollable-card-width);
+  --layout-scrollable-card-height: var(--dimension-scrollable-card-height);
   --layout-content-card-margin-top-desktop: var(--dimension-content-card-margin-top-desktop);
   --layout-content-card-margin-top-mobile: var(--dimension-content-card-margin-top-mobile);
   --layout-notification-card-width: var(--dimension-notification-card-width);
@@ -287,6 +289,8 @@
   --dimension-object-card-mobile-width: 100%;
   --dimension-object-card-mobile-height: auto;
   --dimension-object-card-desktop-breakpoint: 768px;
+  --dimension-scrollable-card-width: 600px;
+  --dimension-scrollable-card-height: 600px;
   --dimension-content-card-margin-top-desktop: 100px;
   --dimension-content-card-margin-top-mobile: 1rem;
   --dimension-object-group-card-min-width: 450px;
@@ -335,7 +339,7 @@
   --chart-label-position: var(--chart-label-position-default);
 }
 
-:root {
+:root[data-portal="naurua"] {
   --color-darkblue: #354A52;
   --font-family-base: "Avenir", sans-serif;
 }
@@ -5031,3 +5035,38 @@ main {
   }
 }
 
+/* ========================================================= */
+/* Patterns: Scrollable Card                                 */
+/* ========================================================= */
+
+.sg-scrollable-card {
+  display: flex;
+  flex-direction: column;
+  width: var(--layout-scrollable-card-width);
+  max-width: 100%;
+  height: var(--layout-scrollable-card-height);
+  box-sizing: border-box;
+}
+
+.sg-scrollable-card__header,
+.sg-scrollable-card__actions-segment {
+  flex: 0 0 auto;
+}
+
+.sg-scrollable-card__content {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.sg-scrollable-card__actions {
+  display: flex;
+  gap: var(--spacing-small);
+  width: 100%;
+}
+
+.sg-scrollable-card__actions > .sg-button {
+  flex: 1 1 0;
+  min-width: 0;
+}
+

public/assets/styleguide.upstream.meta.json

@@ -1,7 +1,7 @@
 {
   "styleguideVersion": "2026.05.18.1",
-  "styleguideCommit": "3f4ec38",
+  "styleguideCommit": "fd73842",
-  "syncedAtUtc": "2026-09-03T15:57:49Z",
+  "syncedAtUtc": "2026-09-06T13:39:50Z",
   "sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide",
   "mirroredDocsPath": "docs/styleguide"
 }

public/assets/styles.css

@@ -175,6 +175,8 @@
   --layout-object-card-mobile-width: var(--dimension-object-card-mobile-width);
   --layout-object-card-mobile-height: var(--dimension-object-card-mobile-height);
   --layout-object-card-desktop-breakpoint: var(--dimension-object-card-desktop-breakpoint);
+  --layout-scrollable-card-width: var(--dimension-scrollable-card-width);
+  --layout-scrollable-card-height: var(--dimension-scrollable-card-height);
   --layout-content-card-margin-top-desktop: var(--dimension-content-card-margin-top-desktop);
   --layout-content-card-margin-top-mobile: var(--dimension-content-card-margin-top-mobile);
   --layout-notification-card-width: var(--dimension-notification-card-width);
@@ -287,6 +289,8 @@
   --dimension-object-card-mobile-width: 100%;
   --dimension-object-card-mobile-height: auto;
   --dimension-object-card-desktop-breakpoint: 768px;
+  --dimension-scrollable-card-width: 600px;
+  --dimension-scrollable-card-height: 600px;
   --dimension-content-card-margin-top-desktop: 100px;
   --dimension-content-card-margin-top-mobile: 1rem;
   --dimension-object-group-card-min-width: 450px;
@@ -335,7 +339,7 @@
   --chart-label-position: var(--chart-label-position-default);
 }
 
-:root {
+:root[data-portal="naurua"] {
   --color-darkblue: #354A52;
   --font-family-base: "Avenir", sans-serif;
 }
@@ -5031,3 +5035,38 @@ main {
   }
 }
 
+/* ========================================================= */
+/* Patterns: Scrollable Card                                 */
+/* ========================================================= */
+
+.sg-scrollable-card {
+  display: flex;
+  flex-direction: column;
+  width: var(--layout-scrollable-card-width);
+  max-width: 100%;
+  height: var(--layout-scrollable-card-height);
+  box-sizing: border-box;
+}
+
+.sg-scrollable-card__header,
+.sg-scrollable-card__actions-segment {
+  flex: 0 0 auto;
+}
+
+.sg-scrollable-card__content {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.sg-scrollable-card__actions {
+  display: flex;
+  gap: var(--spacing-small);
+  width: 100%;
+}
+
+.sg-scrollable-card__actions > .sg-button {
+  flex: 1 1 0;
+  min-width: 0;
+}
+