From 415aa0cd9dd12d55457938db215ec195e76c975d Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Tue, 1 Sep 2026 19:58:44 +0100
Subject: [PATCH] Update App.css for Input Number Component Styling

- Added padding to input fields within the input-number-cal class for improved usability.
- Adjusted z-index and color properties for better visual hierarchy and clarity in the input-number-cal-highlight class.
- Ensured consistent background styling for input fields in the input-number-cal-expr-input class to enhance user experience.
---
 assets/stylesheets/App.css | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/assets/stylesheets/App.css b/assets/stylesheets/App.css
index d481af51..4c0d0bfc 100644
--- a/assets/stylesheets/App.css
+++ b/assets/stylesheets/App.css
@@ -754,6 +754,10 @@ body {
   position: relative;
 }
 
+.input-number-cal input {
+  padding: 4px 12px;
+}
+
 .input-number-cal-highlight {
   position: absolute;
   display: flex;
@@ -761,8 +765,8 @@ body {
   overflow: hidden;
   white-space: pre;
   pointer-events: none;
-  z-index: 0;
-  color: var(--color-text);
+  z-index: 2;
+  color: color-mix(in srgb, var(--color-text) 85%, transparent);
 }
 
 .input-number-cal-operator {
@@ -777,16 +781,18 @@ body {
 .input-number-cal-expr-input.ant-input-affix-wrapper {
   position: relative;
   z-index: 1;
-  background: transparent !important;
 }
 
-.input-number-cal-expr-input.ant-input,
-.input-number-cal-expr-input .ant-input {
-  background: transparent !important;
+.input-number-cal-expr-input.ant-input-affix-wrapper .ant-input,
+.input-number-cal-expr-input.ant-input-outlined:not(.ant-input-affix-wrapper) {
   color: transparent !important;
   caret-color: var(--color-text);
 }
 
+.input-number-cal-expr-input.ant-input-affix-wrapper .ant-input {
+  background: transparent !important;
+}
+
 .input-number-cal .ant-input-suffix {
   margin-right: 28px;
 }