brandonkelly · Oct 1, 2026 · Oct 1, 2026 · Oct 1, 2026 · Oct 1, 2026
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -24,6 +24,7 @@
 - Replaced core inline element editing inputs with Form API controls rendered by Vue, with plugin field HTML compatibility handled by the Yii adapter. ([#19590](https://github.com/craftcms/cms/pull/19590))
 - Improved the styling for collapsible field groups.
 - Improved the layout and dark mode styling of user edit screens. ([#19765](https://github.com/craftcms/cms/pull/19765))
+- Improved the styling of control panel tables and lightswitches. ([#19766](https://github.com/craftcms/cms/pull/19766))
 - Improved disabled secondary form actions with explanatory tooltips.
 - The “Assets” system settings nav item is now listed under “Content”, and “Globals”, “Categories”, and “Tags” are now listed under a new “Deprecated” heading, if those concepts are supported for the project. ([#19670](https://github.com/craftcms/cms/pull/19670))
 - Added the `<craft-timeline-item>` web component. ([#19629](https://github.com/craftcms/cms/pull/19629))

diff --git a/packages/craftcms-ui/src/components/switch-button/switch-button.ts b/packages/craftcms-ui/src/components/switch-button/switch-button.ts
@@ -58,7 +58,6 @@ export default class CraftSwitchButton extends LionSwitchButton {
         .switch-button__track {
           ${baseFormControlStyles}
           --tw-inset-shadow-color: var(--color-slate-300);
-          margin-inline: -1px;
           background-color: var(--c-color-neutral-fill-quiet);
           border-radius: var(--c-radius-full);
           min-height: unset;
@@ -72,15 +71,13 @@ export default class CraftSwitchButton extends LionSwitchButton {
           border: 1px solid var(--c-form-control-border-color);
           background-color: var(--c-switch-thumb-fill, var(--c-surface-raised));
           inset-block-start: calc(var(--c-switch-thumb-offset) / 2);
-          inset-inline-start: calc(var(--c-switch-thumb-offset) / 2 - 1px);
+          inset-inline-start: calc(var(--c-switch-thumb-offset) / 2);
           inset-inline-end: auto;
           box-sizing: border-box;
         }
 
         :host([indeterminate]:not([checked])) .switch-button__thumb {
-          inset-inline-start: calc(
-            50% - (var(--c-switch-thumb-height) / 2) + 1px
-          );
+          inset-inline-start: calc(50% - (var(--c-switch-thumb-height) / 2));
           inset-inline-end: auto;
         }
 
@@ -91,9 +88,7 @@ export default class CraftSwitchButton extends LionSwitchButton {
         :host([checked]) .switch-button__thumb {
           border: 1px solid var(--c-color-success-border-loud);
           inset-inline-start: auto;
-          inset-inline-end: calc(
-            (var(--c-switch-height) - var(--c-switch-thumb-height)) / 2 + 1px
-          );
+          inset-inline-end: calc(var(--c-switch-thumb-offset) / 2);
         }
 
         :host([checked]) .switch-button__thumb:after {

diff --git a/packages/craftcms-ui/src/components/switch/switch.browser.test.ts b/packages/craftcms-ui/src/components/switch/switch.browser.test.ts
@@ -0,0 +1,28 @@
+import {beforeEach, expect, it} from 'vite-plus/test';
+import type CraftSwitch from './switch.js';
+import './switch.js';
+
+beforeEach(() => {
+  document.body.innerHTML = '';
+});
+
+it('is only as tall as its switch', async () => {
+  await import('../../styles/shared/color-palette.css');
+  await import('../../styles/shared/colorable.css');
+  await import('../../styles/shared/variables.css');
+  await import('../../styles/shared/tokens.css');
+
+  for (const size of ['small', 'medium']) {
+    document.body.innerHTML = `<craft-switch label="Enabled" size="${size}"></craft-switch>`;
+    const element = document.querySelector('craft-switch') as CraftSwitch;
+    await element.updateComplete;
+
+    const group = element.shadowRoot!.querySelector('.form-field__group-two')!;
+    const button = element.querySelector('craft-switch-button')!;
+
+    const height = button.getBoundingClientRect().height;
+
+    expect(height, size).toBeGreaterThan(0);
+    expect(group.getBoundingClientRect().height, size).toBe(height);
+  }
+});
diff --git a/packages/craftcms-ui/src/components/switch/switch.styles.ts b/packages/craftcms-ui/src/components/switch/switch.styles.ts
@@ -4,6 +4,13 @@ export default css`
     display: grid;
   }
 
+  .form-field__group-two--switch {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+  }
+
   .input-group {
     display: inline-flex;
     align-items: center;

diff --git a/packages/craftcms-ui/src/components/switch/switch.ts b/packages/craftcms-ui/src/components/switch/switch.ts
@@ -535,6 +535,15 @@ export default class CraftSwitch extends HasLabel(LionSwitch) {
     }
   }
 
+  override render() {
+    return html`
+      <div class="form-field__group-one">${this._groupOneTemplate()}</div>
+      <div class="form-field__group-two form-field__group-two--switch">
+        ${this._groupTwoTemplate()}
+      </div>
+    `;
+  }
+
   protected override _groupOneTemplate() {
     return html`${super._groupOneTemplate()} ${this._stateDescriptionTemplate()}`;
   }

diff --git a/packages/craftcms-ui/src/styles/shared/base.css b/packages/craftcms-ui/src/styles/shared/base.css
@@ -186,7 +186,7 @@ Modify with `cp-table--auto` to apply table-layout: auto
  */
 .cp-table {
   --_cell-spacing-inline: var(--c-spacing-md);
-  --_cell-spacing-block: 0;
+  --_cell-spacing-block: var(--c-spacing-sm);
   --_row-height: calc(34rem / 16);
   text-align: start;
   width: 100%;
@@ -202,6 +202,19 @@ Modify with `cp-table--auto` to apply table-layout: auto
     background-color: var(--c-surface-default);
   }
 
+  thead,
+  tbody,
+  tfoot {
+    &:not(:last-child) tr,
+    &:last-child tr:not(:last-child) {
+      th,
+      td {
+        border-block-end: 1px solid
+          color-mix(var(--c-color-neutral-border-quiet) 60%, transparent);
+      }
+    }
+  }
+
   th,
   td {
     padding-block: var(--_cell-spacing-block);
@@ -211,10 +224,12 @@ Modify with `cp-table--auto` to apply table-layout: auto
     overflow: hidden;
     text-overflow: ellipsis;
     width: 0;
-    border-block-end: 1px solid
-      color-mix(var(--c-color-neutral-border-quiet) 60%, transparent);
 
-    &:has(.cp-table-input:not([type='checkbox']):not([type='radio'])) {
+    &:has(
+      .cp-table-input:not([type='checkbox']):not([type='radio']):not(
+        craft-switch
+      )
+    ) {
       padding: 0;
     }
   }
@@ -257,9 +272,11 @@ Modify with `cp-table--auto` to apply table-layout: auto
 }
 
 .cp-table--editable {
+  --_input-padding-inline: 10px;
   table-layout: auto;
   border: 1px solid var(--c-color-border-quiet);
   border-radius: var(--c-radius-sm);
+  margin-block-end: var(--c-spacing-md);
 
   thead,
   th {
@@ -268,7 +285,9 @@ Modify with `cp-table--auto` to apply table-layout: auto
 
   th {
     font-size: var(--c-text-sm);
-    padding: var(--c-spacing-sm);
+    padding-block: var(--c-spacing-sm);
+    padding-inline: var(--_input-padding-inline);
+    text-align: inherit;
   }
 
   td {
@@ -281,6 +300,10 @@ Modify with `cp-table--auto` to apply table-layout: auto
     width: 0.01%;
   }
 
+  td.select-cell {
+    padding-inline: var(--_input-padding-inline);
+  }
+
   /* Compat */
   .editable-table-preview {
     text-align: start;
@@ -305,7 +328,7 @@ Modify with `cp-table--auto` to apply table-layout: auto
     box-shadow: none;
     border-radius: 0;
     padding-block: 7px;
-    padding-inline: 10px;
+    padding-inline: var(--_input-padding-inline);
     line-height: 20px;
     background-color: transparent;
     overflow: hidden;

diff --git a/resources/js/common/components/DataTable.vue b/resources/js/common/components/DataTable.vue
@@ -288,7 +288,7 @@
             :aria-sort="getAriaSortAttribute(header.column)"
           >
             <div
-              class="flex gap-1 items-center"
+              class="flex gap-1 items-center [.text-center>&]:justify-center"
               :class="{'sr-only': header.column.columnDef.meta?.headerSrOnly}"
             >
               <ColumnHeaderTitle
@@ -301,7 +301,8 @@
                   v-if="!header.isPlaceholder"
                   :render="header.column.columnDef.header"
                   :props="header.getContext()"
-                />&nbsp;<craft-icon
+                /><template v-if="header.column.getCanSort()">&nbsp;</template
+                ><craft-icon
                   v-if="
                     header.column.getCanSort() && !header.column.getIsSorted()
                   "

diff --git a/resources/js/modules/admin-table/components/AdminTable.vue b/resources/js/modules/admin-table/components/AdminTable.vue
@@ -93,10 +93,12 @@
   .admin-table {
     min-width: 0;
   }
-  .admin-table__header,
-  .admin-table__body,
-  .admin-table__footer {
-    padding-inline: var(--cp-container-padding);
+  .admin-table--padded {
+    .admin-table__header,
+    .admin-table__body,
+    .admin-table__footer {
+      padding-inline: var(--cp-container-padding);
+    }
   }
   .admin-table__header {
     margin-block-end: var(--c-spacing-md);

diff --git a/resources/js/modules/sections/components/SiteSettingsTable.vue b/resources/js/modules/sections/components/SiteSettingsTable.vue
@@ -77,7 +77,6 @@
         disabled: () => props.disabled,
         meta: {
           trackSize: '80px',
-          cellClass: 'bg-[var(--c-color-neutral-fill-quiet)]',
         },
         label: t('Enabled'),
       }),
@@ -86,7 +85,7 @@
         meta: {
           trackSize: '44px',
           cellClass: 'text-center',
-          headerClass: 'justify-center',
+          headerClass: 'text-center',
         },
         onChange: (value, {row}) => {
           if (value) {
@@ -148,7 +147,7 @@
               fieldset: true,
               label: t('Route'),
               'label-sr-only': true,
-              class: 'min-w-72 p-1',
+              class: 'min-w-72',
             },
             [
               h(

diff --git a/resources/js/pages/graphql/schemas/Index.vue b/resources/js/pages/graphql/schemas/Index.vue
@@ -89,5 +89,5 @@
       t('New schema')
     }}</CpButtonLink>
   </LayoutSlot>
-  <AdminTable :table="table" />
+  <AdminTable class="admin-table--padded" :table="table" />
 </template>
diff --git a/resources/js/pages/graphql/tokens/Index.vue b/resources/js/pages/graphql/tokens/Index.vue
@@ -94,7 +94,7 @@
       t('New token')
     }}</CpButtonLink>
   </LayoutSlot>
-  <AdminTable :table="table">
+  <AdminTable class="admin-table--padded" :table="table">
     <template #empty-row>
       <craft-empty :label="t('No GraphQL tokens exist yet.')">
         <CpButtonLink :href="create().url" icon="plus">{{

diff --git a/resources/js/pages/settings/assets/Index.vue b/resources/js/pages/settings/assets/Index.vue
@@ -137,6 +137,7 @@
 
   <div class="@container">
     <AdminTable
+      class="admin-table--padded"
       :table="table"
       :reorderable="true"
       :read-only="readOnly"

diff --git a/resources/js/pages/settings/assets/transformers/Index.vue b/resources/js/pages/settings/assets/transformers/Index.vue
@@ -112,5 +112,5 @@
     }}</CpButtonLink>
   </LayoutSlot>
 
-  <AdminTable :table="table" :reorderable="false" />
+  <AdminTable class="admin-table--padded" :table="table" :reorderable="false" />
 </template>
diff --git a/resources/js/pages/settings/assets/transforms/Index.vue b/resources/js/pages/settings/assets/transforms/Index.vue
@@ -108,7 +108,7 @@
   </LayoutSlot>
 
   <div class="@container">
-    <AdminTable :table="table">
+    <AdminTable class="admin-table--padded" :table="table">
       <template #empty-row>
         <craft-empty :label="t('No image transforms exist yet.')" icon="image">
           <CpButtonLink :href="create().url" icon="plus">{{

diff --git a/resources/js/pages/settings/entry-types/Index.vue b/resources/js/pages/settings/entry-types/Index.vue
@@ -138,6 +138,7 @@
   </LayoutSlot>
 
   <AdminTable
+    class="admin-table--padded"
     :table="table"
     :reorderable="false"
     :from="pagination.from"

diff --git a/resources/js/pages/settings/fields/Index.vue b/resources/js/pages/settings/fields/Index.vue
@@ -209,6 +209,7 @@
   </LayoutSlot>
 
   <AdminTable
+    class="admin-table--padded"
     :table="table"
     :reorderable="false"
     :from="pagination.from"

diff --git a/resources/js/pages/settings/sections/Index.vue b/resources/js/pages/settings/sections/Index.vue
@@ -133,6 +133,7 @@
   <CalloutReadOnly v-if="readOnly"></CalloutReadOnly>
 
   <AdminTable
+    class="admin-table--padded"
     :title="title"
     :table="sectionTable"
     :reorderable="false"

diff --git a/resources/js/pages/settings/sites/Index.vue b/resources/js/pages/settings/sites/Index.vue
@@ -264,6 +264,7 @@
     </template>
 
     <AdminTable
+      class="admin-table--padded"
       :table="sitesTable"
       :read-only="readOnly"
       :reorderable="!!group?.id"

diff --git a/resources/js/pages/settings/users/groups/Index.vue b/resources/js/pages/settings/users/groups/Index.vue
@@ -62,7 +62,7 @@
   </LayoutSlot>
 
   <div class="@container">
-    <AdminTable :table="table">
+    <AdminTable class="admin-table--padded" :table="table">
       <template #empty-row>
         <craft-empty icon="users" :label="t('No groups exist yet.')">
           <CpButtonLink :href="create().url" icon="plus">{{

diff --git a/resources/js/pages/settings/workflows/Index.vue b/resources/js/pages/settings/workflows/Index.vue
@@ -112,6 +112,7 @@
   </LayoutSlot>
 
   <AdminTable
+    class="admin-table--padded"
     :table="table"
     :reorderable="false"
     :from="pagination.from"