From f409a67130610bebeb3e18f2a4307fb0cd6ba149 Mon Sep 17 00:00:00 2001
From: Alessandro Mauri <alemauri001@gmail.com>
Date: Mon, 7 Jul 2025 14:46:06 +0200
Subject: [PATCH] highlight problem in 1px border

---
 TODO                         | 2 ++
 lib/ugui.c3l/src/ugui_cmd.c3 | 4 ++--
 resources/style.css          | 7 ++-----
 3 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/TODO b/TODO
index b857d31..96b1ba4 100644
--- a/TODO
+++ b/TODO
@@ -47,6 +47,8 @@ to maintain focus until mouse release (fix scroll bars)
 ## Layout
 
 [x] Flexbox
+[ ] For some reason padding is not correct, look at the sliders, they have 2px per side when the
+    theme specifies 4px per side
 [ ] Center elements to the row/column
 [ ] Text wrapping / reflow
 [ ] Consider a multi-pass recursive approach to layout (like https://github.com/nicbarker/clay)
diff --git a/lib/ugui.c3l/src/ugui_cmd.c3 b/lib/ugui.c3l/src/ugui_cmd.c3
index 6b9b49b..0247e7a 100644
--- a/lib/ugui.c3l/src/ugui_cmd.c3
+++ b/lib/ugui.c3l/src/ugui_cmd.c3
@@ -115,12 +115,12 @@ fn void? Ctx.push_rect(&ctx, Rect rect, int z_index, Style* style)
 		.rect.rect = {
 			.x = rect.x + border + padding.x,
 			.y = rect.y + border + padding.y,
-			.w = rect.w - (border*2) - (padding.x+padding.w),
 			.h = rect.h - (border*2) - (padding.y+padding.h),
+			.w = rect.w - (border*2) - (padding.x+padding.w),
 		},
 		.rect.color = bg,
 		.rect.radius = radius,
-		.rect.thickness = max(rect.w, rect.h),
+		.rect.thickness = max(rect.w, rect.h)/2+1,
 	};
 	if (cull_rect(cmd.rect.rect, ctx.div_scissor)) return;
 	ctx.push_cmd(&cmd, z_index)!;
diff --git a/resources/style.css b/resources/style.css
index 6c11e2c..5c21e83 100644
--- a/resources/style.css
+++ b/resources/style.css
@@ -8,7 +8,6 @@ default {
 
 button {
 	margin: 2 2 2 2;
-	padding: 2 2 2 2;
 	border: 2;
 	radius: 10;
 
@@ -21,7 +20,6 @@ button {
 
 button-active {
 	margin: 2 2 2 2;
-	padding: 1 1 1 1;
 	border: 2;
 	radius: 10;
 
@@ -34,7 +32,6 @@ button-active {
 
 checkbox {
 	margin: 2 2 2 2;
-	padding: 1 1 1 1;
 	border: 2;
 	radius: 10;
 	size: 16;
@@ -59,8 +56,8 @@ toggle {
 
 slider {
 	margin: 2 2 2 2;
-	padding: 2 2 2 2;
-	border: 2;
+	padding: 4 4 4 4;
+	border: 1;
 	radius: 4;
 	size: 8;
 	bg: #3c3836ff;