Tools + Elements panels: ragged pills → uniform grid tiles

Both panels shared the same flex-wrap pill layout where each pill sized to
its content, producing a ragged, hard-to-scan right edge. Switch to a uniform
CSS grid (auto-fill, minmax(68px, 1fr)) of icon-over-label tiles:

- ToolsApp: ToolPill → ToolTile, PillGroup → GridSection
- ElementeApp: PillButton → vertical tile (keeps hasMenu chevron, badge as
  corner pill, disabled state); PillGroup → grid section
- Less chrome: borderless tiles on subtle --bg-item, accent border on hover
- Dropdown tiles (Treppe/Stütze/Träger) keep their relative-positioned
  wrapper so PopupMenu still anchors correctly

src/ElementeApp.jsx

@@ -49,7 +49,8 @@ function ReferenzSelector({ value, onChange }) {
   )
 }
 
-// Pill-Button — kompakt, Icon + Label horizontal, abgerundet
+// Raster-Kachel — Icon oben, Label darunter, einheitliche Zellgroesse.
+// hasMenu zeigt ein kleines Chevron neben dem Label (Rechtsklick = Untertypen).
 function PillButton({ icon, label, hint, onClick, onContextMenu, disabled,
                       hasMenu, badge }) {
   return (
@@ -59,49 +60,58 @@ function PillButton({ icon, label, hint, onClick, onContextMenu, disabled,
       disabled={disabled}
       title={hint}
       style={{
-        display: 'flex', alignItems: 'center', gap: 6,
-        padding: '5px 10px 5px 8px',
-        background: 'var(--bg-input)',
-        border: '1px solid var(--border-light)',
-        borderRadius: 999,
+        display: 'flex', flexDirection: 'column',
+        alignItems: 'center', justifyContent: 'center', gap: 6,
+        padding: '10px 4px',
+        minHeight: 56,
+        background: 'var(--bg-item)',
+        border: '1px solid transparent',
+        borderRadius: 10,
         cursor: disabled ? 'not-allowed' : 'pointer',
         opacity: disabled ? 0.4 : 1,
-        transition: 'background 0.1s, border-color 0.1s',
-        fontSize: 11, fontWeight: 500,
+        transition: 'background 0.12s, border-color 0.12s',
+        fontSize: 10, fontWeight: 500,
         color: 'var(--text-primary)',
-        whiteSpace: 'nowrap',
         position: 'relative',
+        width: '100%',
+        appearance: 'none', WebkitAppearance: 'none',
       }}
       onMouseEnter={(e) => { if (!disabled) {
         e.currentTarget.style.background = 'var(--bg-item-hover)'
         e.currentTarget.style.borderColor = 'var(--accent)'
       }}}
       onMouseLeave={(e) => {
-        e.currentTarget.style.background = 'var(--bg-input)'
-        e.currentTarget.style.borderColor = 'var(--border-light)'
+        e.currentTarget.style.background = 'var(--bg-item)'
+        e.currentTarget.style.borderColor = 'transparent'
       }}
     >
-      <Icon name={icon} size={14} style={{ color: 'var(--accent)' }} />
-      <span>{label}</span>
+      <Icon name={icon} size={19} style={{ color: 'var(--accent)', flexShrink: 0 }} />
+      <span style={{
+        display: 'flex', alignItems: 'center', gap: 2,
+        maxWidth: '100%', overflow: 'hidden',
+        textOverflow: 'ellipsis', whiteSpace: 'nowrap',
+      }}>
+        {label}
         {hasMenu && (
-        <Icon name="expand_more" size={12}
-              style={{ color: 'var(--text-muted)', marginLeft: -2 }} />
+          <Icon name="expand_more" size={11}
+                style={{ color: 'var(--text-muted)', flexShrink: 0 }} />
         )}
+      </span>
       {badge && (
         <span style={{
-          fontSize: 9, padding: '1px 5px', borderRadius: 8,
+          position: 'absolute', top: 4, right: 4,
+          fontSize: 8, padding: '0px 4px', borderRadius: 8,
           background: 'var(--bg-section)', color: 'var(--text-muted)',
-          marginLeft: 2,
         }}>{badge}</span>
       )}
     </button>
   )
 }
 
-// Vertikale Kategorie-Gruppe mit Label + Pills, die wrappen
+// Kategorie-Gruppe: Label + einheitliches Raster (auto-fill Spalten)
 function PillGroup({ label, children }) {
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
       <span style={{
         fontSize: 9, color: 'var(--text-muted)',
         letterSpacing: '0.08em', textTransform: 'uppercase',
@@ -109,7 +119,11 @@ function PillGroup({ label, children }) {
       }}>
         {label}
       </span>
-      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 5 }}>
+      <div style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fill, minmax(68px, 1fr))',
+        gap: 6,
+      }}>
         {children}
       </div>
     </div>

src/ToolsApp.jsx

@@ -54,7 +54,7 @@ const TOOLS = {
 
 // ---------------------------------------------------------------------------
 
-function ToolPill({ icon, label, cmd, tip }) {
+function ToolTile({ icon, label, cmd, tip }) {
   return (
     <button
       onClick={() => runRhinoCommand(cmd)}
@@ -64,32 +64,36 @@ function ToolPill({ icon, label, cmd, tip }) {
         e.currentTarget.style.background = 'var(--bg-item-hover)'
       }}
       onMouseLeave={(e) => {
-        e.currentTarget.style.borderColor = 'var(--border-light)'
-        e.currentTarget.style.background = 'var(--bg-input)'
+        e.currentTarget.style.borderColor = 'transparent'
+        e.currentTarget.style.background = 'var(--bg-item)'
       }}
       style={{
-        display: 'flex', alignItems: 'center', gap: 6,
-        padding: '5px 10px 5px 8px',
-        background: 'var(--bg-input)',
-        border: '1px solid var(--border-light)',
-        borderRadius: 999,
+        display: 'flex', flexDirection: 'column',
+        alignItems: 'center', justifyContent: 'center', gap: 6,
+        padding: '10px 4px',
+        minHeight: 56,
+        background: 'var(--bg-item)',
+        border: '1px solid transparent',
+        borderRadius: 10,
         cursor: 'pointer',
-        transition: 'background 0.1s, border-color 0.1s',
-        fontSize: 11, fontWeight: 500,
+        transition: 'background 0.12s, border-color 0.12s',
+        fontSize: 10, fontWeight: 500,
         color: 'var(--text-primary)',
-        whiteSpace: 'nowrap',
         appearance: 'none', WebkitAppearance: 'none',
       }}
     >
-      <Icon name={icon} size={14} style={{ color: 'var(--accent)', flexShrink: 0 }} />
-      <span>{label}</span>
+      <Icon name={icon} size={19} style={{ color: 'var(--accent)', flexShrink: 0 }} />
+      <span style={{
+        maxWidth: '100%', overflow: 'hidden',
+        textOverflow: 'ellipsis', whiteSpace: 'nowrap',
+      }}>{label}</span>
     </button>
   )
 }
 
-function PillGroup({ label, children }) {
+function GridSection({ label, children }) {
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
       <span style={{
         fontSize: 9, color: 'var(--text-muted)',
         letterSpacing: '0.08em', textTransform: 'uppercase',
@@ -97,7 +101,11 @@ function PillGroup({ label, children }) {
       }}>
         {label}
       </span>
-      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 5 }}>
+      <div style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fill, minmax(68px, 1fr))',
+        gap: 6,
+      }}>
         {children}
       </div>
     </div>
@@ -122,11 +130,11 @@ export default function WerkzeugeApp() {
       overflowY: 'auto', overflowX: 'hidden',
     }}>
       {groups.map(([title, items]) => (
-        <PillGroup key={title} label={title}>
+        <GridSection key={title} label={title}>
           {items.map(([icon, label, cmd, tip]) => (
-            <ToolPill key={cmd} icon={icon} label={label} cmd={cmd} tip={tip} />
+            <ToolTile key={cmd} icon={icon} label={label} cmd={cmd} tip={tip} />
           ))}
-        </PillGroup>
+        </GridSection>
       ))}
     </div>
   )