fix(org): hold empty states, row dividers and edge actions to the page's column

An empty state sat 8px inside it, a divider ran 8px past it, a text button's label
past it on touch, and an account's menu 15px short.

Author: waleedlatif1

apps/sim/platform/design-system/components/empty-state/empty-state.module.css

@@ -9,7 +9,7 @@
 .empty {
   justify-content: center;
   min-height: calc(var(--spacing-56) * 2);
-  padding: var(--spacing-16) var(--spacing-8);
+  padding-block: var(--spacing-16);
   color: var(--ui-ink);
 }
 

apps/sim/platform/design-system/components/settings-section/settings-section.module.css

@@ -132,6 +132,15 @@
   gap: 0;
 }
 
+/* The divider stops with the text, where the row's hover fill reaches past it. */
 .rowList[data-dividers] > * + * {
+  position: relative;
+}
+
+.rowList[data-dividers] > * + *::before {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline: var(--ui-row-inset);
   border-block-start: var(--spacing-stroke-default) solid var(--ui-divider);
+  content: "";
 }

apps/sim/platform/embedded/app/(shell)/integrations/_components/connected-credential/connected-credential.module.css

@@ -22,6 +22,7 @@
   flex: none;
   align-items: center;
   gap: var(--ui-stack-gap);
+  margin-inline-end: calc(-1 * var(--ui-action-overhang));
 }
 .link {
   color: inherit;

apps/sim/platform/embedded/app/(shell)/settings/_components/sections/usage/usage-section.module.css

@@ -149,7 +149,8 @@
   background: var(--control-danger);
 }
 .edgeAction {
-  margin-inline-end: calc(-1 * var(--ui-action-overhang));
+  /* A text button's own padding: its label ends on the column's edge, at any pointer. */
+  margin-inline-end: calc(-1 * var(--spacing-8));
 }
 .tableHeading {
   display: flex;

apps/sim/platform/embedded/app/(shell)/settings/_components/settings-screen/settings-screen.module.css

@@ -31,7 +31,8 @@
 }
 .docs {
   flex: none;
-  margin-inline-end: calc(-1 * var(--ui-action-overhang));
+  /* A text button's own padding: its label ends on the column's edge, at any pointer. */
+  margin-inline-end: calc(-1 * var(--spacing-8));
 }
 .breadcrumb {
   display: flex;