refactor(ui): Improve StringInput component styling and label handlin…

…g; update tooltip in app.py
numerous-com · Dec 23, 2024 · 2166241 · 2166241
1 parent 0b9df43
commit 2166241
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 12 deletions.
diff --git a/js/src/components/ui/String.tsx b/js/src/components/ui/String.tsx
@@ -31,12 +31,10 @@ export function StringInput({
     return (
         <div className={`string-input-container ${fitToContent ? 'fit-to-content' : ''}`}>
             <div className="input-wrapper" style={{ width: fitToContent ? 'auto' : '100%' }}>
-                <div className="string-label-container" style={{ alignItems: 'center' }}>
                     <label className="string-label">
-                        <span >{uiLabel}</span>
+                        <span className="string-label-text">{uiLabel}</span>
                         {uiTooltip && <Tooltip tooltip={uiTooltip} />}
                     </label>
-                </div>
                 <input 
                     type={isPassword ? "password" : "text"}
                     value={value}

diff --git a/js/src/css/styles.css b/js/src/css/styles.css
@@ -77,7 +77,7 @@ main {
 
 label {
   display: block;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0rem;
   font-weight: 500;
   color: #444;
 }
@@ -1396,15 +1396,22 @@ select::-ms-expand {
   z-index: 9999 !important;
 }
 
+.string-label-text {
+  width: fit-content;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .string-input-container {
   position: relative;
   display: flex;
   flex-direction: column;
   width: 100%;
   vertical-align: top;
-  gap: 4px;
 }
 
+
 .string-input-container.fit-to-content {
   width: fit-content;
   display: inline-flex;
@@ -1417,17 +1424,14 @@ select::-ms-expand {
   color: var(--ui-widget-primary-text);
   font-size: 14px;
   padding-left: 8px;
-  margin-right: 8px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  position: relative;
-  z-index: 1;
+  margin-bottom: 0;
 }
 
+
 .input-wrapper {
   position: relative;
   z-index: 0;
+  gap: 4px;
 }
 
 input[type="text"] {
@@ -2218,4 +2222,12 @@ input[type="text"].invalid:focus {
 
 .modal-button.secondary:hover {
     background-color: var(--ui-widget-hover-background);
+}
+
+.string-label-container {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    margin-top: 0;
+    margin-bottom: 0;
 }
diff --git a/python/examples/marimo/numerous/app.py b/python/examples/marimo/numerous/app.py
@@ -98,7 +98,7 @@ def _(mo):
 
 @app.cell
 def _(aw, value, wi):
-    counter = aw(wi.Number(default=value(), label="Counter:", fit_to_content=True))
+    counter = aw(wi.Number(default=value(), label="Counter:", fit_to_content=True, tooltip="This is the value the counter has reached."))
     return (counter,)