chore: add list-detail-extra dev page and refactor shared CSS (#11412)

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: web-padawan

dev/mdl-use-cases/common.css

@@ -6,44 +6,66 @@ body {
   font-family: system-ui, sans-serif;
 }
 
+/* Reusable pane with a grid filling the remaining space */
 .master-pane {
   display: flex;
   flex-direction: column;
   height: 100%;
 }
 
+.master-pane > :is(h2, h3, h4) {
+  margin: 0;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--vaadin-border-color-secondary);
+}
+
+.master-pane > h2 {
+  font-size: 1.1rem;
+}
+
 .master-pane vaadin-grid {
   flex: 1;
   min-height: 0;
   border: none;
   border-radius: 0;
 }
 
-.detail-pane {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow: auto;
-}
-
-.detail-header {
+/* Pane header with back/close button + heading */
+.pane-header {
   display: flex;
   align-items: center;
-  gap: 12px;
-  padding: 16px;
+  gap: 8px;
+  padding: 12px 16px;
   border-bottom: 1px solid var(--vaadin-border-color-secondary);
   flex-shrink: 0;
 }
 
-.detail-header .close-btn {
+.pane-header :is(h2, h3, h4) {
+  margin: 0;
+  flex: 1;
+}
+
+.pane-header h2 {
+  font-size: 1.1rem;
+}
+
+/* Back / close button used in pane headers */
+.back-btn {
   cursor: pointer;
   background: none;
-  border: 1px solid #ccc;
+  border: 1px solid var(--vaadin-border-color-secondary);
   border-radius: 6px;
   padding: 4px 12px;
   font-size: 0.85rem;
 }
 
+.detail-pane {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: auto;
+}
+
 .detail-subject {
   font-size: 1.2rem;
   font-weight: 600;
@@ -61,9 +83,11 @@ body {
 }
 
 .detail-body {
-  padding: 16px 24px;
-  line-height: 1.7;
-  font-size: 0.95rem;
+  flex: 1;
+  padding: 16px;
+  line-height: 1.6;
+  font-size: 0.9rem;
+  overflow: auto;
 }
 
 .detail-body p {
@@ -78,6 +102,45 @@ body {
   color: var(--vaadin-text-color-secondary);
 }
 
+/* Grid cell: flex column with primary + secondary text */
+.grid-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 4px 0;
+  cursor: pointer;
+}
+
+.grid-cell .primary {
+  font-weight: 600;
+  font-size: 0.9rem;
+}
+
+.grid-cell .secondary {
+  font-size: 0.8rem;
+  color: var(--vaadin-text-color-secondary);
+}
+
+/* Definition list for key-value pairs */
+.props-list {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  font-size: 0.9rem;
+}
+
+.props-list dt {
+  font-size: 0.8rem;
+  color: var(--vaadin-text-color-secondary);
+  margin: 0;
+}
+
+.props-list dd {
+  margin: 2px 0 0;
+}
+
+/* Email-specific cell (wider padding) */
 .email-cell {
   display: flex;
   flex-direction: column;

dev/mdl-use-cases/email-folders-list-message.html

@@ -12,27 +12,6 @@
     </script>
     <link rel="stylesheet" href="./common.css" />
     <style>
-      /* Folder pane */
-      .folder-pane {
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-      }
-
-      .folder-pane h2 {
-        margin: 0;
-        padding: 16px;
-        font-size: 1.1rem;
-        border-bottom: 1px solid var(--vaadin-border-color-secondary);
-      }
-
-      .folder-pane vaadin-grid {
-        flex: 1;
-        min-height: 0;
-        border: none;
-        border-radius: 0;
-      }
-
       .folder-cell {
         display: flex;
         align-items: center;
@@ -48,28 +27,8 @@
         font-size: 0.8rem;
       }
 
-      /* Master pane header */
-      .master-pane-header {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        padding: 16px;
-        border-bottom: 1px solid var(--vaadin-border-color-secondary);
-      }
-
-      .master-pane-header h2 {
-        margin: 0;
-        font-size: 1.1rem;
-      }
-
-      .back-btn {
+      .master-pane .back-btn {
         display: none;
-        cursor: pointer;
-        background: none;
-        border: 1px solid #ccc;
-        border-radius: 6px;
-        padding: 4px 12px;
-        font-size: 0.85rem;
       }
 
       #outerLayout[overflow] .back-btn {
@@ -86,7 +45,7 @@
       overlay-size="100%"
       no-animation
     >
-      <div class="folder-pane">
+      <div class="master-pane">
         <h2>Mail</h2>
         <vaadin-grid id="folderGrid" theme="no-border no-row-borders"></vaadin-grid>
       </div>
@@ -100,7 +59,7 @@ <h2>Mail</h2>
         no-animation
       >
         <div class="master-pane">
-          <div class="master-pane-header">
+          <div class="pane-header">
             <button class="back-btn" id="backBtn">&larr; Back</button>
             <h2 id="folderTitle">Inbox</h2>
           </div>
@@ -203,8 +162,8 @@ <h2 id="folderTitle">Inbox</h2>
         const detail = document.createElement('div');
         detail.classList.add('detail-pane');
         detail.innerHTML = `
-          <div class="detail-header">
-            <button class="close-btn" id="closeBtn">Close</button>
+          <div class="pane-header">
+            <button class="back-btn" id="closeBtn">Close</button>
             <div class="detail-subject">${email.subject}</div>
           </div>
           <div class="detail-meta">

dev/mdl-use-cases/email-list-message.html

@@ -11,14 +11,6 @@
       window.Vaadin.featureFlags.masterDetailLayoutComponent = true;
     </script>
     <link rel="stylesheet" href="./common.css" />
-    <style>
-      .master-pane h2 {
-        margin: 0;
-        padding: 16px;
-        font-size: 1.1rem;
-        border-bottom: 1px solid var(--vaadin-border-color-secondary);
-      }
-    </style>
   </head>
   <body>
     <vaadin-master-detail-layout
@@ -80,8 +72,8 @@ <h2>Inbox</h2>
         const detail = document.createElement('div');
         detail.classList.add('detail-pane');
         detail.innerHTML = `
-          <div class="detail-header">
-            <button class="close-btn" id="closeBtn">Close</button>
+          <div class="pane-header">
+            <button class="back-btn" id="closeBtn">Close</button>
             <div class="detail-subject">${email.subject}</div>
           </div>
           <div class="detail-meta">

dev/mdl-use-cases/index.html

@@ -13,6 +13,7 @@ <h1>MDL Use Cases</h1>
       <li><a href="email-list-message.html">Email — List - Message</a></li>
       <li><a href="email-folders-list-message.html">Email — Folders - List - Message</a></li>
       <li><a href="nav-section-list-detail.html">Nav → Section → List → Detail</a></li>
+      <li><a href="list-detail-extra.html">List → Detail → Extra</a></li>
     </ul>
   </body>
 </html>