Fix field label style

henck · Feb 19, 2024 · 1658cb2 · 1658cb2
1 parent 5f0f0ae
commit 1658cb2
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@independent-software/typeui",
-  "version": "1.2.18",
+  "version": "1.2.19",
   "description": "TypeUI",
   "keywords": [
     "react",

diff --git a/src/controls/Form/FieldWrapper.tsx b/src/controls/Form/FieldWrapper.tsx
@@ -56,7 +56,7 @@ const FieldWrapper = styled(FieldWrapperBase)`
       border-color: ${lighten(0.25, p.theme.primaryColor)};
     }
     /* Label */
-    &>*:nth-child(1) {
+    & > *:nth-child(1) {
       padding-left: 15px;
       padding-right: 14px;
       line-height: 12px;
@@ -65,10 +65,9 @@ const FieldWrapper = styled(FieldWrapperBase)`
       font-variant: all-small-caps;      
       opacity: ${p.error ? 0 : 1};
       color: #2C4253;
-
     }
     /* Hint/error */
-    &>*:nth-child(3) {
+    & > *:nth-child(3) {
       position: absolute;
       ${p.error && css`left: 12px;`}
       ${!p.error && css`right: 12px;`}

diff --git a/src/controls/Form/Label.tsx b/src/controls/Form/Label.tsx
@@ -41,6 +41,9 @@ const Label = styled(LabelBase)`
   font-size: 80%;
   margin-right: 1em;
   color: ${p => lighten(0.5, p.theme.fontColor)};
+  white-space: nowrap;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
 
   /* Ordinarily, labels are displayed above the field control: */
   display: block;