From 61fe006fc5c283c88d21ad4c4c74c2afb70e5f13 Mon Sep 17 00:00:00 2001
From: Terranom674 <thomas_dannenberg@web.de>
Date: Sun, 16 Aug 2026 15:24:21 +0200
Subject: [PATCH] Improve selection toolbar alignment and responsiveness

---
 css/public_selection.css | 49 ++++++++++++++++++++++++++++++++--------
 1 file changed, 40 insertions(+), 9 deletions(-)

diff --git a/css/public_selection.css b/css/public_selection.css
index a1955c4..a4f1aa2 100644
--- a/css/public_selection.css
+++ b/css/public_selection.css
@@ -2,6 +2,17 @@
   display:inline-flex;
   align-items:center;
   justify-content:center;
+  vertical-align:middle;
+  line-height:1;
+}
+
+#bratonien-selection-toggle .pwg-icon {
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  line-height:1;
+  vertical-align:middle;
+  transform:none;
 }
 
 #bratonien-selection-toggle.active {
@@ -14,11 +25,13 @@
   z-index:1000;
   display:flex;
   flex-wrap:wrap;
-  gap:.45rem;
+  gap:.45rem .7rem;
   align-items:center;
-  width:max-content;
+  justify-content:flex-end;
+  box-sizing:border-box;
+  width:calc(100% - 1rem);
   max-width:100%;
-  margin:.35rem .6rem .75rem auto;
+  margin:.35rem .5rem .75rem;
   padding:.45rem .55rem;
   border:1px solid rgba(255,255,255,.16);
   border-radius:.4rem;
@@ -27,7 +40,8 @@
 }
 
 .bratonien-selection-status {
-  padding:0 .45rem 0 .2rem;
+  margin-right:auto;
+  padding:0 .35rem;
   white-space:nowrap;
   color:#d7d7d7;
 }
@@ -35,7 +49,9 @@
 .bratonien-selection-actions {
   display:flex;
   flex-wrap:wrap;
+  justify-content:flex-end;
   gap:.35rem;
+  min-width:0;
 }
 
 .bratonien-selection-actions button {
@@ -47,6 +63,7 @@
   color:inherit;
   cursor:pointer;
   font:inherit;
+  white-space:nowrap;
 }
 
 .bratonien-selection-actions button:hover:not(:disabled),
@@ -74,7 +91,6 @@
 
 .bratonien-selection-error {
   flex-basis:100%;
-  max-width:34rem;
   padding:.15rem .25rem 0;
   color:#e58b8b;
 }
@@ -119,18 +135,33 @@
   pointer-events:none;
 }
 
-@media (max-width:640px) {
+@media (max-width:760px) {
   .bratonien-selection-bar {
-    width:auto;
-    margin:.35rem .5rem .75rem;
+    align-items:stretch;
+    justify-content:stretch;
   }
+
   .bratonien-selection-status {
     width:100%;
+    margin-right:0;
+    padding:.1rem .2rem;
   }
+
   .bratonien-selection-actions {
+    display:grid;
+    grid-template-columns:repeat(3,minmax(0,1fr));
     width:100%;
   }
+
   .bratonien-selection-actions button {
-    flex:1 1 auto;
+    width:100%;
+    min-width:0;
+    white-space:normal;
+  }
+}
+
+@media (max-width:480px) {
+  .bratonien-selection-actions {
+    grid-template-columns:1fr;
   }
 }