vmui: increase font-size and fix the text display (#4273)

vmui: change default font size to 14px for better readability
vmui: fix bug with missing text on buttons in safari

---------

Co-authored-by: Roman Khavronenko <roman@victoriametrics.com>

app/vmui/packages/vmui/src/components/Chart/GraphTips/style.scss

@@ -19,7 +19,7 @@
 
     &__description {
       display: inline-block;
-      line-height: 20px;
+      line-height: 1.5;
 
       svg,
       code {

app/vmui/packages/vmui/src/components/Chart/Line/ChartTooltip/style.scss

@@ -66,7 +66,7 @@ $chart-tooltip-y: -1 * ($padding-small + $chart-tooltip-half-icon);
     gap: $padding-small;
     align-items: flex-start;
     word-break: break-all;
-    line-height: 12px;
+    line-height: $font-size;
 
     &__marker {
       width: 12px;

app/vmui/packages/vmui/src/components/Chart/Line/Legend/LegendItem/style.scss

@@ -11,6 +11,7 @@
   cursor: pointer;
   transition: 0.2s ease;
   margin-bottom: $padding-small;
+  font-size: $font-size-small;
 
   &:hover {
     background-color: rgba(0, 0, 0, 0.1);

app/vmui/packages/vmui/src/components/Configurators/AdditionalSettings/style.scss

@@ -5,7 +5,7 @@
   align-items: center;
   justify-content: flex-start;
   flex-wrap: wrap;
-  gap: $padding-global;
+  gap: $padding-medium;
 
   &__input {
     flex-basis: 160px;

app/vmui/packages/vmui/src/components/Configurators/StepConfigurator/style.scss

@@ -34,16 +34,15 @@
 
     &-info {
       font-size: $font-size-small;
-      line-height: 1.6;
+      line-height: 1.8;
 
       a {
-        margin: 0 0.2em;
+        margin: 0 0.4em;
       }
 
       code {
         padding: 0.2em 0.4em;
         margin: 0 0.2em;
-        font-size: 85%;
         background-color: $color-hover-black;
         border-radius: 6px;
       }

app/vmui/packages/vmui/src/components/Layout/Header/HeaderNav/style.scss

@@ -5,8 +5,6 @@
   align-items: center;
   justify-content: flex-start;
   gap: $padding-global;
-  font-size: $font-size-small;
-  font-weight: bold;
 
   &_column {
     flex-direction: column;
@@ -25,10 +23,12 @@
   &-item {
     position: relative;
     padding: $padding-global $padding-small;
-    opacity: 0.5;
+    opacity: 0.7;
     cursor: pointer;
     transition: opacity 200ms ease-in;
-    text-transform: uppercase;
+    text-transform: capitalize;
+    font-size: $font-size;
+    font-weight: normal;
 
     &_sub {
       display: grid;
@@ -63,11 +63,9 @@
       white-space: nowrap;
       padding: $padding-small;
       color: $color-white;
-      border-radius: 2px;
+      border-radius: $border-radius-small;
       opacity: 1;
       transform-origin: top center;
-      font-size: $font-size-small;
-      font-weight: bold;
 
       &-item {
         cursor: pointer;

app/vmui/packages/vmui/src/components/Layout/Header/style.scss

@@ -63,9 +63,4 @@
       margin: 0 auto;
     }
   }
-
-  &-nav {
-    font-size: $font-size-small;
-    font-weight: bold;
-  }
 }

app/vmui/packages/vmui/src/components/Main/Alert/style.scss

@@ -10,10 +10,10 @@
   background-color: $color-background-block;
   border-radius: $border-radius-medium;
   box-shadow: $box-shadow;
-  font-size: $font-size-medium;
+  font-size: $font-size;
   font-weight: normal;
   color: $color-text;
-  line-height: 20px;
+  line-height: 1.5;
 
   &_mobile {
     align-items: flex-start;

app/vmui/packages/vmui/src/components/Main/Button/style.scss

@@ -9,7 +9,7 @@ $button-radius: 6px;
   justify-content: center;
   padding: 6px 14px;
   font-size: $font-size-small;
-  line-height: 15px;
+  line-height: 1.3;
   font-weight: normal;
   min-height: 31px;
   border-radius: $button-radius;
@@ -49,6 +49,7 @@ $button-radius: 6px;
     display: grid;
     align-items: center;
     justify-content: center;
+    transform: translateZ(1px);
 
     svg {
       width: 15px;
@@ -79,7 +80,7 @@ $button-radius: 6px;
 
   /* size SMALL */
   &_small {
-    padding: 4px 6px;
+    padding: 4px 8px;
     min-height: 25px;
 
     span {

app/vmui/packages/vmui/src/components/Main/Select/style.scss

@@ -5,12 +5,11 @@
     position: relative;
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    padding: 8px 0 8px $padding-global;
-    padding: 5px 0 5px $padding-global;
     cursor: pointer;
     border: $border-divider;
     border-radius: $border-radius-small;
-    min-height: 36px;
+    min-height: 40px;
 
     &-content {
       display: flex;
@@ -18,8 +17,7 @@
       justify-content: flex-start;
       flex-wrap: wrap;
       gap: $padding-small;
-      width: 100%;
+      flex-grow: 1;
-      max-width: calc(100% - ($padding-global + 61px));
 
       &_mobile {
         flex-wrap: nowrap;

app/vmui/packages/vmui/src/components/Main/Switch/style.scss

@@ -73,8 +73,12 @@ $switch-border-radius: $switch-handle-size + ($switch-padding * 2);
   &__label {
     white-space: nowrap;
     font-size: inherit;
-    color: inherit;
     margin-left: $padding-small;
     transition: color 200ms ease;
+    color: $color-text-secondary;
+  }
+
+  &_active &__label {
+    color: $color-text;
   }
 }

app/vmui/packages/vmui/src/components/Main/Tabs/style.scss

@@ -16,7 +16,7 @@
     padding: $padding-global $padding-small;
     color: inherit;
     text-decoration: none;
-    text-transform: uppercase;
+    text-transform: capitalize;
     font-size: inherit;
     font-weight: inherit;
     opacity: 0.6;
@@ -33,7 +33,7 @@
 
     &__icon {
       display: grid;
-      width: 15px;
+      width: 16px;
       margin-right: $padding-small;
 
       &_single {

app/vmui/packages/vmui/src/components/Main/TextField/style.scss

@@ -18,7 +18,7 @@
     padding: $padding-small $padding-global;
     border: $border-divider;
     background-color: transparent;
-    font-size: 12px;
+    font-size: $font-size;
     line-height: 18px;
     grid-area: 1 / 1 / 2 / 2;
     overflow: hidden;
@@ -71,7 +71,7 @@
     display: block;
     border-radius: $border-radius-small;
     transition: border 200ms ease;
-    min-height: 34px;
+    min-height: 40px;
     resize: none;
     overflow: hidden;
     background-color: transparent;

app/vmui/packages/vmui/src/components/TraceQuery/NestedNav/NestedNav.tsx

@@ -88,11 +88,12 @@ const NestedNav: FC<RecursiveProps> = ({ trace, totalMsec })  => {
           </div>
           {(isExpanded || showFullMessage) && (
             <Button
-              variant="text"
+              variant="outlined"
               size="small"
+              color="secondary"
               onClick={handleClickShowMore}
             >
-              {showFullMessage ? "Hide" : "Show more"}
+              {showFullMessage ? "Hide" : "Show full query"}
             </Button>
           )}
         </div>

app/vmui/packages/vmui/src/pages/CardinalityPanel/CardinalityTips/style.scss

@@ -67,15 +67,6 @@
       }
     }
 
-    h5 {
-      font-size: $font-size-medium;
-      margin-bottom: $padding-small;
-    }
-
-    h6 {
-      margin-bottom: $padding-small;
-    }
-
     ul, ol {
       list-style-position: inside;
 

app/vmui/packages/vmui/src/pages/CardinalityPanel/CardinalityTotals/style.scss

@@ -41,8 +41,6 @@
       max-width: 280px;
       white-space: normal;
       padding: $padding-small;
-      line-height: $font-size;
-      font-size: $font-size;
     }
 
     &__value {

app/vmui/packages/vmui/src/pages/CardinalityPanel/MetricsContent/style.scss

@@ -14,8 +14,6 @@
       max-width: 300px;
       white-space: normal;
       padding: $padding-small;
-      line-height: 130%;
-      font-size: $font-size;
 
       p {
         margin-bottom: $padding-small;

app/vmui/packages/vmui/src/pages/CardinalityPanel/Table/TableSettings/style.scss

@@ -14,7 +14,7 @@
 
   &-list {
     display: grid;
-    gap: $padding-small;
+    gap: 12px;
     padding: $padding-global;
     max-height: 350px;
     overflow: auto;

app/vmui/packages/vmui/src/pages/PredefinedPanels/PredefinedDashboard/style.scss

@@ -14,7 +14,7 @@
     font-weight: bold;
     transform-style: preserve-3d;
     overflow: hidden;
-    line-height: 14px;
+    line-height: 1;
     box-shadow: $box-shadow;
     transition: box-shadow 200ms ease-in-out;
 

app/vmui/packages/vmui/src/pages/TracePage/style.scss

@@ -69,7 +69,7 @@
 
     &__text {
       margin-bottom: $padding-global;
-      font-size: $font-size-medium;
+      font-size: $font-size;
       white-space: pre-line;
       text-align: center;
       line-height: 1.8;

app/vmui/packages/vmui/src/pages/WithTemplate/WithTemplateTutorial/style.scss

@@ -5,7 +5,7 @@
   gap: $padding-large;
 
   &__title {
-    font-size: $font-size-large;
+    font-size: $font-size-medium;
     font-weight: bold;
   }
 
@@ -14,7 +14,7 @@
     gap: $padding-global;
 
     &__text {
-      font-size: $font-size-medium;
+      font-size: $font-size;
       line-height: 130%;
       max-width: 720px;
     }

app/vmui/packages/vmui/src/styles/components/table.scss

@@ -26,11 +26,11 @@
   }
 
   &-cell {
-    padding: $padding-small;
+    padding: 12px;
     border-bottom: $border-divider;
     height: 40px;
     vertical-align: top;
-    line-height: 25px;
+    line-height: 1.5;
 
     &__content {
       display: flex;

app/vmui/packages/vmui/src/styles/variables.scss

@@ -40,10 +40,10 @@ $padding-small: 8px;
 /************* fonts *************/
 $font-family-global: 'Lato', sans-serif;
 $font-family-monospace: monospace;
-$font-size-large: 16px;
+$font-size-large: 18px;
-$font-size-medium: 14px;
+$font-size-medium: 16px;
-$font-size: 12px;
+$font-size: 14px;
-$font-size-small: 10px;
+$font-size-small: 12px;
 
 
 /************* border *************/

docs/CHANGELOG.md

@@ -44,6 +44,7 @@ The following tip changes can be tested by building VictoriaMetrics components f
 * FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): display histograms as heatmaps in [Metrics explorer](https://docs.victoriametrics.com/#metrics-explorer). See [this feature request](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/4111).
 * FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): add `WITH template` playground. See [this feature request](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3811).
 * FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): add ability to debug relabeling. See [this feature request](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3807).
+* FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): increase default font size to `14px` for better usability.
 * FEATURE: [vmbackup](https://docs.victoriametrics.com/vmbackup.html): add `-s3StorageClass` command-line flag for setting the storage class for AWS S3 backups. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/4164). Thanks to @justcompile for the [pull request](https://github.com/VictoriaMetrics/VictoriaMetrics/pull/4166).
 * FEATURE: [vmbackup](https://docs.victoriametrics.com/vmbackup.html): store backup creation and completion time in `backup_complete.ignore` file of backup contents. This allows determining the exact timestamp when the backup was created and completed.
 * FEATURE: [vmbackupmanager](https://docs.victoriametrics.com/vmbackupmanager.html): add `created_at` field to the output of `/api/v1/backups` API and `vmbackupmanager backup list` command. See this [doc](https://docs.victoriametrics.com/vmbackupmanager.html#api-methods) for data format details.
@@ -65,6 +66,7 @@ The following tip changes can be tested by building VictoriaMetrics components f
 * BUGFIX: [vmalert](https://docs.victoriametrics.com/vmalert.html): properly return empty slices instead of nil for `/api/v1/rules` and `/api/v1/alerts` API handlers. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/4221).
 * BUGFIX: [vmui](https://docs.victoriametrics.com/#vmui): fix the display of the tenant selector. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/4160).
 * BUGFIX: [vmui](https://docs.victoriametrics.com/#vmui): fix UI freeze when the query returns non-histogram series alongside histogram series.
+* BUGFIX: [vmui](https://docs.victoriametrics.com/#vmui): fix the text display on buttons in Safari 16.4.
 * BUGFIX: [alerts-health](https://github.com/VictoriaMetrics/VictoriaMetrics/blob/master/deployment/docker/alerts-health.yml): update threshold for `TooHighMemoryUsage` alert from 90% to 80%, since 90% is too high for production environments.
 * BUGFIX: [vmbackup](https://docs.victoriametrics.com/vmbackup.html): fix compatibility with Windows OS. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/70).
 * BUGFIX: [vmctl](https://docs.victoriametrics.com/vmctl.html): fix performance issue when migrating data from VictoriaMetrics according to [these docs](https://docs.victoriametrics.com/vmctl.html#migrating-data-from-victoriametrics). Add the ability to speed up the data migration via `--vm-native-disable-retries` command-line flag. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/4092).