feat(delete): borderless table

apps/client/src/widgets/dialogs/delete_notes.tsx

@@ -216,8 +216,8 @@ function BrokenRelations({ brokenRelations }: { brokenRelations: DeleteNotesPrev
 
     return (
         <Card heading={t("delete_notes.broken_relations_to_be_deleted", { relationCount: brokenRelations.length })}>
-            <CardSection>
-                <div style={{ overflow: "auto" }}>
+            <CardSection noPadding>
+                <div style={{ overflowX: "auto" }}>
                     <table className="table table-striped">
                         <thead>
                             <tr>

apps/client/src/widgets/react/Card.css

@@ -35,6 +35,14 @@
     flex-direction: column;
     gap: var(--card-section-gap);
 
+    .tn-card-section.tn-no-padding {
+        padding: 0;
+
+        & .table {
+            margin-bottom: 0;
+        }
+    }
+
     .tn-card-section {
         &:first-of-type {
             border-top-left-radius: var(--card-border-radius);

apps/client/src/widgets/react/Card.tsx

@@ -50,6 +50,7 @@ export interface CardSectionProps {
     subSectionsVisible?: boolean;
     highlightOnHover?: boolean;
     onAction?: () => void;
+    noPadding?: boolean;
 }
 
 interface CardSectionContextType {
@@ -65,7 +66,8 @@ export function CardSection(props: {children: ComponentChildren} & CardSectionPr
     return <>
         <section className={clsx("tn-card-section", props.className, {
                     "tn-card-section-nested": nestingLevel > 0,
-                    "tn-card-highlight-on-hover": props.highlightOnHover || props.onAction
+                    "tn-card-highlight-on-hover": props.highlightOnHover || props.onAction,
+                    "tn-no-padding": props.noPadding
                  })}
                  style={{"--tn-card-section-nesting-level": (nestingLevel) ? nestingLevel : null}}
                  onClick={props.onAction}>