From 7d7ab8055d3978f3f34dc1dd55566970455e1c1f Mon Sep 17 00:00:00 2001
From: Aleksander <aleksander@oo8.dev>
Date: Wed, 18 Jun 2025 23:28:03 +0200
Subject: [PATCH] fix keyboard layout

---
 wgui/doc/widgets.md                    |   2 +-
 wgui/src/parser/style.rs               |  21 ++++
 wlx-overlay-s/src/assets/keyboard.xml  | 146 ++++++++++---------------
 wlx-overlay-s/src/overlays/keyboard.rs |   1 -
 4 files changed, 77 insertions(+), 93 deletions(-)

diff --git a/wgui/doc/widgets.md b/wgui/doc/widgets.md
index 289e23c..b6682cf 100644
--- a/wgui/doc/widgets.md
+++ b/wgui/doc/widgets.md
@@ -28,7 +28,7 @@
 
 `padding`, `padding_left`, `padding_right`, `padding_top`, `padding_bottom`: units (42) or percent (42%)
 
-`overflow_x`, `overflow_y`: hidden | visible | clip | scroll
+`overflow`, `overflow_x`, `overflow_y`: hidden | visible | clip | scroll
 
 `min_width`, `min_height`: units (42) or percent (42%)
 
diff --git a/wgui/src/parser/style.rs b/wgui/src/parser/style.rs
index 7e230db..39d7eee 100644
--- a/wgui/src/parser/style.rs
+++ b/wgui/src/parser/style.rs
@@ -84,6 +84,27 @@ pub fn style_from_node<'a>(
 					style.padding.bottom = dim;
 				}
 			}
+			"overflow" => match &*value {
+				"hidden" => {
+					style.overflow.x = Overflow::Hidden;
+					style.overflow.y = Overflow::Hidden;
+				}
+				"visible" => {
+					style.overflow.x = Overflow::Visible;
+					style.overflow.y = Overflow::Visible;
+				}
+				"clip" => {
+					style.overflow.x = Overflow::Clip;
+					style.overflow.y = Overflow::Clip;
+				}
+				"scroll" => {
+					style.overflow.x = Overflow::Scroll;
+					style.overflow.y = Overflow::Scroll;
+				}
+				_ => {
+					print_invalid_attrib(&key, &value);
+				}
+			},
 			"overflow_x" => match &*value {
 				"hidden" => style.overflow.x = Overflow::Hidden,
 				"visible" => style.overflow.x = Overflow::Visible,
diff --git a/wlx-overlay-s/src/assets/keyboard.xml b/wlx-overlay-s/src/assets/keyboard.xml
index b704aee..a888dda 100644
--- a/wlx-overlay-s/src/assets/keyboard.xml
+++ b/wlx-overlay-s/src/assets/keyboard.xml
@@ -3,111 +3,75 @@
   <!-- Key cap with a single label. -->
   <!-- Used for letter keys on layouts without AltGr. -->
   <template name="KeyLetter">
-    <rectangle
-      border_color="#0044CC"
-      border="2"
-      round="8"
-      color="#000A1C"
-      color2="#000002"
-      gradient="vertical"
-      width="${width}"
-      height="${height}"
-      min_width="${width}"
-      min_height="${height}"
-      max_width="${width}"
-      max_height="${height}"
-      margin="4"
-      align_items="center"
-      justify_content="center">
-      <label color="#FFFFFF" text="${text}" size="24" />
-    </rectangle>
+    <div width="${width}" height="${height}" min_width="${width}" min_height="${height}" max_width="${width}" max_height="${height}">
+      <rectangle
+        margin="4" width="100%" overflow="hidden" box_sizing="border_box"
+        border_color="#0044CC" border="2" round="8" color="#000A1C" color2="#000002" gradient="vertical"
+        align_items="center"
+        justify_content="center">
+        <label color="#FFFFFF" text="${text}" size="24" />
+      </rectangle>
+    </div>
   </template>
 
   <!-- Key cap with a primary label on top and an AltGr label on bottom. -->
   <!-- Used for letter keys on layouts with AltGr. -->
   <template name="KeyLetterAltGr">
-    <rectangle
-      border_color="#0044CC"
-      border="2"
-      round="8"
-      color="#000A1C"
-      color2="#000002"
-      gradient="vertical"
-      width="${width}"
-      height="${height}"
-      min_width="${width}"
-      min_height="${height}"
-      max_width="${width}"
-      max_height="${height}"
-      margin="4"
-      gap="4"
-      flex_direction="column"
-      align_items="center"
-      justify_content="center">
-      <label color="#FFFFFF" text="${text}" size="24" />
-      <label color="#FFFFFF70" text="${text_altgr}" size="24" />
-    </rectangle>
+    <div width="${width}" height="${height}" min_width="${width}" min_height="${height}" max_width="${width}" max_height="${height}">
+      <rectangle
+        margin="4" width="100%" overflow="hidden" box_sizing="border_box"
+        border_color="#0044CC" border="2" round="8" color="#000A1C" color2="#000002" gradient="vertical"
+        gap="4"
+        flex_direction="column"
+        align_items="center"
+        justify_content="center">
+        <label color="#FFFFFF" text="${text}" size="24" />
+        <label color="#FFFFFF70" text="${text_altgr}" size="24" />
+      </rectangle>
+    </div>
   </template>
 
   <!-- Key cap with a primary label on bottom and a Shift label on top. -->
   <!-- Used for number & symbol keys on layouts without AltGr. -->
   <template name="KeySymbol">
-    <rectangle
-      border_color="#0044CC"
-      border="2"
-      round="8"
-      color="#000A1C"
-      color2="#000002"
-      gradient="vertical"
-      width="${width}"
-      height="${height}"
-      min_width="${width}"
-      min_height="${height}"
-      max_width="${width}"
-      max_height="${height}"
-      margin="4"
-      gap="4"
-      flex_direction="column"
-      align_items="center"
-      justify_content="center">
-      <label color="#FFFFFF70" text="${text_shift}" size="24" />
-      <label color="#FFFFFF" text="${text}" size="24" />
-    </rectangle>
+    <div width="${width}" height="${height}" min_width="${width}" min_height="${height}" max_width="${width}" max_height="${height}">
+      <rectangle
+        margin="4" width="100%" overflow="hidden" box_sizing="border_box"
+        border_color="#0044CC" border="2" round="8" color="#000A1C" color2="#000002" gradient="vertical"
+        gap="4"
+        flex_direction="column"
+        align_items="center"
+        justify_content="center"
+      >
+        <label color="#FFFFFF70" text="${text_shift}" size="24" />
+        <label color="#FFFFFF" text="${text}" size="24" />
+      </rectangle>
+    </div>
   </template>
 
   <!-- Key cap with a primary label on bottom-left, an AltGr label on bottom-right, Shift label on top-left. -->
   <!-- Used for number & symbol keys on layouts with AltGr. -->
   <template name="KeySymbolAltGr">
-    <rectangle
-      border_color="#0044CC"
-      border="2"
-      round="8"
-      color="#000A1C"
-      color2="#000002"
-      gradient="vertical"
-      width="${width}"
-      height="${height}"
-      min_width="${width}"
-      min_height="${height}"
-      max_width="${width}"
-      max_height="${height}"
-      flex_direction="row"
-      flex_wrap="wrap"
-      align_items="center"
-      margin="4"
-      padding="8"
-      justify_content="center">
-      <div width="50%" height="50%" align_items="center" justify_content="center">
-        <label color="#FFFFFF70" text="${text_shift}" size="24" />
-      </div>
-      <div width="50%" height="50%" align_items="center" justify_content="center"/>
-      <div width="50%" height="50%" align_items="center" justify_content="center">
-        <label color="#FFFFFF" text="${text}" size="24" />
-      </div>
-      <div width="50%" height="50%" align_items="center" justify_content="center">
-        <label color="#FFFFFF70" text="${text_altgr}" size="24" />
-      </div>
-    </rectangle>
+    <div width="${width}" height="${height}" min_width="${width}" min_height="${height}" max_width="${width}" max_height="${height}">
+      <rectangle
+        margin="4" width="100%" overflow="hidden" box_sizing="border_box"
+        border_color="#0044CC" border="2" round="8" color="#000A1C" color2="#000002" gradient="vertical"
+        flex_direction="row"
+        flex_wrap="wrap"
+        align_items="center"
+        justify_content="center">
+        <div width="50%" height="50%" align_items="center" justify_content="center">
+          <label color="#FFFFFF70" text="${text_shift}" size="24" />
+        </div>
+        <div width="50%" height="50%" align_items="center" justify_content="center" />
+        <div width="50%" height="50%" align_items="center" justify_content="center">
+          <label color="#FFFFFF" text="${text}" size="24" />
+        </div>
+        <div width="50%" height="50%" align_items="center" justify_content="center">
+          <label color="#FFFFFF70" text="${text_altgr}" size="24" />
+        </div>
+      </rectangle>
+    </div>
   </template>
 
-</layout>
+</layout>
\ No newline at end of file
diff --git a/wlx-overlay-s/src/overlays/keyboard.rs b/wlx-overlay-s/src/overlays/keyboard.rs
index 47b7fe4..d1a0338 100644
--- a/wlx-overlay-s/src/overlays/keyboard.rs
+++ b/wlx-overlay-s/src/overlays/keyboard.rs
@@ -37,7 +37,6 @@ use wgui::{
 };
 
 const PIXELS_PER_UNIT: f32 = 80.;
-const BUTTON_PADDING: f32 = 4.;
 const AUTO_RELEASE_MODS: [KeyModifier; 5] = [SHIFT, CTRL, ALT, SUPER, META];
 
 pub const KEYBOARD_NAME: &str = "kbd";