QueryBuilder/COMPACT_UI_CHANGES.md

Kompaktere UI - Änderungen

Übersicht

Die Benutzeroberfläche wurde kompakter gestaltet, um mehr Informationen auf weniger Platz anzuzeigen.

Vorgenommene Änderungen

1. Kleinere Buttons (btn-sm)

• Padding: 0.25rem → 0.15rem (vertikal), 0.5rem → 0.4rem (horizontal)
• Schriftgröße: 0.875rem → 0.75rem
• Zeilenhöhe: Hinzugefügt 1.2 für kompaktere Darstellung

2. Extra kleine Buttons (btn-xs - neue Klasse)

• Padding: 0.1rem × 0.25rem
• Schriftgröße: 0.65rem
• Zeilenhöhe: 1.1

3. Tabellen-Items

• Padding: 8px 12px → 4px 8px
• Margin: 2px → 1px (vertikal)
• Schriftgröße: Standard → 0.85rem
• Border-Radius: 4px → 3px

4. Tabellen-Icons

• Margin: 8px → 6px (rechts)
• Schriftgröße: Hinzugefügt 0.8rem

5. Spalten-Container (.table-columns)

• Margin-left: 12px → 8px
• Margin-top: 4px → 2px
• Padding: 8px → 4px 6px
• Border-Radius: 4px → 3px

6. Spalten-Items (.column-item)

• Padding: 4px 8px → 2px 6px
• Margin: 1px → 0.5px (vertikal)
• Schriftgröße: 12px → 11px
• Gap: 6px → 4px
• Border-Radius: 3px → 2px
• Zeilenhöhe: Hinzugefügt 1.2

7. Spalten-Typ (.column-type)

• Schriftgröße: 10px → 9px

8. Toggle-Button

• Margin: 5px → 3px (rechts)
• Padding: Hinzugefügt 0.1rem 0.3rem
• Schriftgröße: Hinzugefügt 0.7rem

9. Container-Abstände

• Table-Container Margin: 8px → 4px (unten)

Ergebnis

• ✅ Kompaktere Darstellung - Mehr Tabellen und Spalten sichtbar
• ✅ Bessere Platzausnutzung - Weniger Verschwendung von Bildschirmplatz
• ✅ Erhaltene Funktionalität - Drag & Drop und alle Interaktionen bleiben voll funktionsfähig
• ✅ Verbesserte Lesbarkeit - Trotz kleinerer Größe gut lesbar durch angepasste Zeilenhöhen

Verwendung

• Bestehende Buttons verwenden automatisch die neuen kompakteren Größen
• Neue .btn-xs Klasse verfügbar für noch kleinere Buttons bei Bedarf
• Alle Spalten und Tabellen werden automatisch kompakter dargestellt