Spaces between number entry boxes inside a container

[baremeter]

How can I reduce the gaps between the elements inside the container, I need to add a couple more number entry boxes but gaps are too big .

[Himaladin]

Instead of adjusting the spacing, you can switch to a more compact input style.
This floating label + bottom-border approach reduces vertical space significantly.

Here’s an example:

CSS Code

/* Space between input groups */
[data-testid="wire-container"] {
  margin-bottom: 16px;
}

/* Floating label (default: small and above input) */
[data-testid="wf-title"] {
  position: absolute;
  top: 12px;
  transform: translateY(-1.5rem) scale(0.75);
  transform-origin: left top;
  transition: all 0.2s ease;
}

/* Empty input → label acts like placeholder */
[class^="wire-field___StyledLabel"]:has([data-testid="wf-input"]:placeholder-shown)
[data-testid="wf-title"] {
  transform: translateY(0) scale(1);
  color: #9ca3af;
}

/* Focus → label floats + active color */
[class^="wire-field___StyledLabel"]:has([data-testid="wf-input"]:focus)
[data-testid="wf-title"] {
  transform: translateY(-1.5rem) scale(0.75);
  color: #3b82f6;
}

/* Filled input → keep label floating */
[class^="wire-field___StyledLabel"]:has([data-testid="wf-input"]:not(:placeholder-shown))
[data-testid="wf-title"] {
  transform: translateY(-1.5rem) scale(0.75);
  color: #6b7280;
}

/* Input container → bottom border only (number & text entry) */
[class^="wire-field___StyledLabel2"],
#main-root [data-testid="wire-container"] textarea {
  border: none;
  border-bottom: 2px solid var(--gv-border-dark);
  border-radius: 0;
  background-color: transparent;
}

/* Remove hover border & shadow */
#main-root [class^="wire-field___StyledLabel2"]:hover,
#main-root [data-testid="wire-container"] textarea:hover {
  border: none;
  border-bottom: 2px solid var(--gv-border-dark);
  box-shadow: none;
}

/* Remove focus ring */
[class^="wire-field___StyledLabel2"]:focus,
[class^="wire-field___StyledLabel2"]:focus-visible,
#main-root [data-testid="wire-container"] textarea:focus,
#main-root [data-testid="wire-container"] textarea:focus-visible {
  box-shadow: none;
}

/* Focus → bottom border highlight  */
#main-root [class^="wire-field___StyledLabel"]:has([data-testid="wf-input"]:focus)
[class^="wire-field___StyledLabel2"], #main-root [data-testid="wire-container"]:has(textarea:focus) textarea {
  border-bottom-color: #3b82f6;
}

[baremeter]

Thanks for you reply - does this code go into a rich text field inside the container ?

[Jeff_Hager]

No, there are designated places to enter CSS.

Custom CSS | Glide Docs