Question Investigation 21 Choosing Height for Toolbar - herougo/SoftwareEngineerKnowledgeRepository GitHub Wiki

Prompt

I'm creating a large popup in my website with a top panel for buttons and a display for a pdf. How do I choose the size of the top panel for my CSS?

Answer (ChatGPT)

Answers ordered from best to fallback.

1) Let content define the height (recommended)

Why

  • Buttons may change (icons β†’ text, localization, zoom controls)
  • Works across font sizes and accessibility settings
  • No magic numbers
.popup {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.popup-toolbar {
  flex-shrink: 0;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #ccc;
}

.popup-content {
  flex: 1;
  overflow: hidden;
}

2) Use a design-system height (if you want consistency)

If your app already has a standard toolbar size, reuse it.

Typical values:

  • 40–44px β†’ compact
  • 48px β†’ most common (Material UI default)
  • 56–64px β†’ touch-friendly / high-density controls

Example

:root {
  --popup-toolbar-height: 48px;
}

.popup-toolbar {
  height: var(--popup-toolbar-height);
}

When this is appropriate

  • You have many popups/modals
  • You want a consistent visual rhythm
  • Buttons won’t change much

3) Use min-height instead of height (hybrid)

This gives structure without breaking flexibility.

.popup-toolbar {
  min-height: 48px;
  padding: 0.5rem 1rem;
}

❌ What to avoid

.popup-toolbar {
  height: 10%;
}

Why this is bad

  • Toolbars should be sized by content, not viewport
  • Wastes space on large screens
  • Breaks on small ones

Final Recommendation

.popup {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.popup-toolbar {
  min-height: 48px;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #ddd;
}

.popup-pdf {
  flex: 1;
  overflow: hidden;
}

Follow-up prompt

What about the buttons? How should I declare the size?

Answer

2) Use a consistent button height (recommended for toolbars)

Most professional toolbars standardize button height, not width.

Common button heights

Context Height
Compact desktop toolbar 28–32px
Standard desktop toolbar 32–36px
Touch-friendly 40–44px

Example

:root {
  --toolbar-button-height: 32px;
}

.toolbar-button {
  height: var(--toolbar-button-height);
  padding: 0 0.5rem;
}

5) Spacing between buttons (don’t use margins)

Use layout gap instead:

.toolbar {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

This keeps spacing consistent and easier to tune.