From 10cf1a371eb84e3d1cc57678b4b08beaabd8e9f6 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Sun, 15 Feb 2026 18:34:00 +0200
Subject: [PATCH] style/card: improve

---
 apps/client/src/widgets/react/Card.css | 9 +++++----
 apps/client/src/widgets/react/Card.tsx | 7 ++++---
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/apps/client/src/widgets/react/Card.css b/apps/client/src/widgets/react/Card.css
index 49b3145f8d..4afa49b898 100644
--- a/apps/client/src/widgets/react/Card.css
+++ b/apps/client/src/widgets/react/Card.css
@@ -1,6 +1,7 @@
 .tn-card {
     --card-border-radius: 8px;
-    --card-padding: 8px 16px;
+    --card-padding-block: 8px;
+    --card-padding-inline: 16px;
     --card-section-gap: 3px;
     --card-nested-section-indent: 30px;
 
@@ -9,7 +10,7 @@
     gap: var(--card-section-gap);
 
     .tn-card-section {
-        padding: var(--card-padding);
+        padding: var(--card-padding-block) var(--card-padding-inline);
         border: 1px solid var(--card-border-color, var(--main-border-color));
         background: var(--card-background-color);
 
@@ -24,11 +25,11 @@
         }
 
         &.tn-card-section-nested {
-            padding-left: calc(var(--card-nested-section-indent) * var(--tn-card-section-nesting-level));
+            padding-left: calc(var(--card-padding-inline) + var(--card-nested-section-indent) * var(--tn-card-section-nesting-level));
             background-color: color-mix(in srgb, var(--card-background-color) calc(100% / (var(--tn-card-section-nesting-level) + 1)) , transparent);
         }
 
-        &.tn-action:hover {
+        &.tn-card-section-highlight-on-hover:hover {
             background-color: var(--card-background-hover-color);
             transition: background-color .2s ease-out;
         }
diff --git a/apps/client/src/widgets/react/Card.tsx b/apps/client/src/widgets/react/Card.tsx
index c717ee5433..141cd0119f 100644
--- a/apps/client/src/widgets/react/Card.tsx
+++ b/apps/client/src/widgets/react/Card.tsx
@@ -17,7 +17,8 @@ export function Card(props: {children: ComponentChildren} & CardProps) {
 interface CardSectionProps {
     className?: string;
     subSections?: JSX.Element | JSX.Element[];
-    childrenVisible?: boolean;
+    subSectionsVisible?: boolean;
+    highlightOnHover?: boolean;
     hasAction?: boolean;
     onAction?: () => void;
 }
@@ -29,14 +30,14 @@ export function CardSection(props: {children: ComponentChildren} & CardSectionPr
     return <>
         <section className={clsx("tn-card-section", props.className, {
                     "tn-card-section-nested": nestingLevel > 0,
-                    "tn-action": props.hasAction
+                    "tn-card-section-highlight-on-hover": props.highlightOnHover || props.hasAction
                  })}
                  style={{"--tn-card-section-nesting-level": nestingLevel}}
                  onClick={props.onAction}>
             {props.children}
         </section>
 
-        {props.childrenVisible &&
+        {props.subSectionsVisible &&
             <CardSectionContext.Provider value={{nestingLevel}}>
                 {props.subSections}
             </CardSectionContext.Provider>