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/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>
   )