From cd87a0b7f4c12c773af35a343630386f87a7e89b Mon Sep 17 00:00:00 2001
From: karim <karim@gabrielevarano.ch>
Date: Sat, 6 Jun 2026 15:23:52 +0200
Subject: [PATCH] Tools + Elements: horizontal tiles in grid + dropdown moved
 left
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Tile content back to horizontal (icon beside label, left-aligned) while
  keeping the aligned grid columns — per user choice 'Raster + horizontal'
- Wider 'both' column (86px) to fit icon+label in one row, single-row height
- Display-mode dropdown moved to the left (justify-content flex-start)
- icon-only and text-only modes stay centered; hasMenu chevron inline next
  to label (both/text) or as corner indicator (icon-only)
---
 src/ElementeApp.jsx | 22 ++++++++++++----------
 src/ToolsApp.jsx    | 20 +++++++++++---------
 2 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/src/ElementeApp.jsx b/src/ElementeApp.jsx
index 14d4be8..5802f82 100644
--- a/src/ElementeApp.jsx
+++ b/src/ElementeApp.jsx
@@ -29,8 +29,8 @@ function readTileMode() {
 function writeTileMode(m) {
   try { localStorage.setItem(TILE_MODE_KEY, m) } catch { /* WebView ohne Storage */ }
 }
-const TILE_MIN_COL = { icon: 40, text: 66, both: 58 }
-const TILE_MIN_H   = { icon: 38, text: 30, both: 46 }
+const TILE_MIN_COL = { icon: 40, text: 64, both: 86 }
+const TILE_MIN_H   = { icon: 32, text: 30, both: 32 }
 
 function TileModeDropdown({ mode, onChange }) {
   return (
@@ -89,9 +89,11 @@ function PillButton({ icon, label, hint, onClick, onContextMenu, disabled,
       disabled={disabled}
       title={hint}
       style={{
-        display: 'flex', flexDirection: 'column',
-        alignItems: 'center', justifyContent: 'center', gap: 4,
-        padding: '6px 4px',
+        display: 'flex', flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: mode === 'both' ? 'flex-start' : 'center',
+        gap: showIcon && showLabel ? 7 : 0,
+        padding: mode === 'icon' ? '6px' : '5px 11px',
         minHeight: TILE_MIN_H[mode],
         background: 'var(--bg-input)',
         border: '1px solid var(--border-light)',
@@ -99,7 +101,7 @@ function PillButton({ icon, label, hint, onClick, onContextMenu, disabled,
         cursor: disabled ? 'not-allowed' : 'pointer',
         opacity: disabled ? 0.4 : 1,
         transition: 'background 0.12s, border-color 0.12s',
-        fontSize: 10, fontWeight: 500,
+        fontSize: 11, fontWeight: 500,
         color: 'var(--text-primary)',
         position: 'relative',
         width: '100%',
@@ -115,13 +117,13 @@ function PillButton({ icon, label, hint, onClick, onContextMenu, disabled,
       }}
     >
       {showIcon && (
-        <Icon name={icon} size={mode === 'icon' ? 18 : 16}
+        <Icon name={icon} size={16}
               style={{ color: 'var(--accent)', flexShrink: 0 }} />
       )}
       {showLabel && (
         <span style={{
           display: 'flex', alignItems: 'center', gap: 2,
-          maxWidth: '100%', overflow: 'hidden',
+          overflow: 'hidden',
           textOverflow: 'ellipsis', whiteSpace: 'nowrap',
         }}>
           {label}
@@ -134,7 +136,7 @@ function PillButton({ icon, label, hint, onClick, onContextMenu, disabled,
       {/* Im Icon-Modus signalisiert ein kleines Eck-Chevron das Dropdown */}
       {hasMenu && !showLabel && (
         <Icon name="expand_more" size={10}
-              style={{ position: 'absolute', bottom: 2, right: 2,
+              style={{ position: 'absolute', bottom: 1, right: 3,
                        color: 'var(--text-muted)' }} />
       )}
       {badge && (
@@ -477,7 +479,7 @@ function NeuesElementSection({ noGeschoss, activeName, elementsCount, treppe2DSh
         )}
       </div>
 
-      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+      <div style={{ display: 'flex', justifyContent: 'flex-start' }}>
         <TileModeDropdown mode={tileMode} onChange={changeTileMode} />
       </div>
 
diff --git a/src/ToolsApp.jsx b/src/ToolsApp.jsx
index 1e1742c..0dd79cd 100644
--- a/src/ToolsApp.jsx
+++ b/src/ToolsApp.jsx
@@ -12,8 +12,8 @@ function readTileMode() {
 function writeTileMode(m) {
   try { localStorage.setItem(TILE_MODE_KEY, m) } catch { /* WebView ohne Storage */ }
 }
-const TILE_MIN_COL = { icon: 40, text: 66, both: 58 }
-const TILE_MIN_H   = { icon: 38, text: 30, both: 46 }
+const TILE_MIN_COL = { icon: 40, text: 64, both: 86 }
+const TILE_MIN_H   = { icon: 32, text: 30, both: 32 }
 
 // Tool-Definitionen: [icon, label, rhino-command, tooltip]
 // Material-Symbol-Namen siehe https://fonts.google.com/icons
@@ -81,27 +81,29 @@ function ToolTile({ icon, label, cmd, tip, mode }) {
         e.currentTarget.style.background = 'var(--bg-input)'
       }}
       style={{
-        display: 'flex', flexDirection: 'column',
-        alignItems: 'center', justifyContent: 'center', gap: 4,
-        padding: '6px 4px',
+        display: 'flex', flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: mode === 'both' ? 'flex-start' : 'center',
+        gap: showIcon && showLabel ? 7 : 0,
+        padding: mode === 'icon' ? '6px' : '5px 11px',
         minHeight: TILE_MIN_H[mode],
         background: 'var(--bg-input)',
         border: '1px solid var(--border-light)',
         borderRadius: 999,
         cursor: 'pointer',
         transition: 'background 0.12s, border-color 0.12s',
-        fontSize: 10, fontWeight: 500,
+        fontSize: 11, fontWeight: 500,
         color: 'var(--text-primary)',
         appearance: 'none', WebkitAppearance: 'none',
       }}
     >
       {showIcon && (
-        <Icon name={icon} size={mode === 'icon' ? 18 : 16}
+        <Icon name={icon} size={16}
               style={{ color: 'var(--accent)', flexShrink: 0 }} />
       )}
       {showLabel && (
         <span style={{
-          maxWidth: '100%', overflow: 'hidden',
+          overflow: 'hidden',
           textOverflow: 'ellipsis', whiteSpace: 'nowrap',
         }}>{label}</span>
       )}
@@ -164,7 +166,7 @@ export default function WerkzeugeApp() {
       boxSizing: 'border-box',
       overflowY: 'auto', overflowX: 'hidden',
     }}>
-      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+      <div style={{ display: 'flex', justifyContent: 'flex-start' }}>
         <TileModeDropdown mode={mode} onChange={changeMode} />
       </div>
       {groups.map(([title, items]) => (