diff --git a/docs/_layouts/component.njk b/docs/_layouts/component.njk
index 2980ce651..bee60ba6a 100644
--- a/docs/_layouts/component.njk
+++ b/docs/_layouts/component.njk
@@ -69,41 +69,35 @@
         <thead>
           <tr>
             <th class="table-name">Name</th>
-            <th class="table-attribute">Attribute</th>
             <th class="table-description">Description</th>
             <th class="table-reflects">Reflects</th>
-            <th class="table-type">Type</th>
-            <th class="table-default">Default</th>
           </tr>
         </thead>
         <tbody>
           {% for prop in component.properties %}
             <tr>
               <td class="table-name">
-                <code>{{ prop.name }}</code>
-              </td>
-              <td class="table-attribute">
+                <code>{{ prop.name }}</code><br>
                 {% if prop.attribute %}
-                  <code>{{ prop.attribute }}</code>
+                  <div><small><code>{{ prop.attribute }}</code></small></div>
                 {% endif %}
               </td>
               <td class="table-description">
-                {{ prop.description | inlineMarkdown | safe }}
+                <div>{{ prop.description | inlineMarkdown | safe }}</div>
+                {% if prop.type.text %}
+                  <div><small><strong>Type</strong>&nbsp;<code>{{ prop.type.text | trimPipes | inlineMarkdown | safe }}</code></small></div>
+                {% endif %}
+                {% if prop.default %}
+                  <div><small><strong>Default</strong>&nbsp;<code>{{ prop.default | inlineMarkdown | safe }}</code></small></div>
+                {% endif %}
               </td>
               <td class="table-checkmark">
                 {% if prop.reflects %}
                   <wa-icon name="check"></wa-icon>
                 {% endif %}
               </td>
-              <td class="table-type">
-                {% if prop.type.text %}
-                  <code>{{ prop.type.text | trimPipes | inlineMarkdown | safe }}</code>
-                {% endif %}
-              </td>
               <td class="table-default">
-                {% if prop.default %}
-                  <code>{{ prop.default | inlineMarkdown | safe }}</code>
-                {% endif %}
+
               </td>
             </tr>
           {% endfor %}
@@ -206,17 +200,18 @@
           <tr>
             <th class="table-name">Name</th>
             <th class="table-description">Description</th>
-            <th>Default</th>
           </tr>
         </thead>
         <tbody>
           {% for cssProperty in component.cssProperties %}
             <tr>
               <td class="table-name"><code>{{ cssProperty.name }}</code></td>
-              <td class="table-description">{{ cssProperty.description | inlineMarkdown | safe }}</td>
-              <td class="table-default">
+              <td class="table-description">
+                <div>{{ cssProperty.description | inlineMarkdown | safe }}</div>
                 {% if cssProperty.default %}
-                  <code>{{ cssProperty.default }}</code>
+                  <div>
+                    <small><strong>Default</strong>&nbsp;<code>{{ cssProperty.default }}</code></small>
+                    </div>
                 {% endif %}
               </td>
             </tr>
@@ -236,7 +231,6 @@
           <tr>
             <th class="table-name">Name</th>
             <th class="table-description">Description</th>
-            <th class="table-selector">CSS selector</th>
           </tr>
         </thead>
         <tbody>
@@ -244,7 +238,6 @@
             <tr>
               <td class="table-name"><code>{{ cssPart.name }}</code></td>
               <td class="table-description">{{ cssPart.description | inlineMarkdown | safe }}</td>
-              <td class="table-selector"><code>::part({{ cssPart.name }})</code></td>
             </tr>
           {% endfor %}
         </tbody>
diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css
index 5a52ae1b8..b31548de1 100644
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@@ -105,6 +105,11 @@ wa-page[view='desktop'] > #sidebar {
   max-height: 100%;
 }
 
+wa-page[view='desktop'] > #outline {
+  min-width: 240px;
+  max-width: 240px;
+}
+
 #sidebar,
 #outline {
   h2 {
@@ -191,7 +196,7 @@ wa-page > main {
 .callout {
   display: flex;
   gap: 1rem;
-  border: var(--wa-border-style) var(--wa-border-width-m);
+  border: var(--wa-border-style) var(--wa-border-width-s);
   border-radius: var(--wa-border-radius-m);
   padding: 1rem;
   margin-block-end: var(--wa-flow-spacing);
@@ -258,3 +263,7 @@ wa-page > main {
   columns: 2;
   gap: 1rem;
 }
+
+.component-table td > * + * {
+  margin-block-start: var(--wa-space-s);
+}
diff --git a/src/themes/applied.css b/src/themes/applied.css
index 2837d0565..e0a03a53c 100644
--- a/src/themes/applied.css
+++ b/src/themes/applied.css
@@ -191,7 +191,7 @@ var {
 }
 
 code {
-  white-space: pre;
+  white-space: normal;
 }
 
 pre {
@@ -355,7 +355,8 @@ th {
 td,
 th {
   text-align: start;
-  padding: var(--wa-space-s);
+  padding: var(--wa-space-l) var(--wa-space-s);
+  vertical-align: top;
 }
 
 /* Definition lists */