Skip to content

fix(s-header): use min-height on navbar-brand; give logo a definite default height - #648

Merged
wesleyboar merged 2 commits into
mainfrom
fix/s-header-logo-height
Jun 16, 2026
Merged

fix(s-header): use min-height on navbar-brand; give logo a definite default height#648
wesleyboar merged 2 commits into
mainfrom
fix/s-header-logo-height

Conversation

@wesleyboar

@wesleyboar wesleyboar commented Jun 16, 2026

Copy link
Copy Markdown
Member

Overview

Fixed logo sizing in .s-header: container can now grow for logos with explicit heights, and un-sized logos get a definite default so SVGs don't overflow and PNGs don't balloon.

Related

Changes

  • replaced height with min-height on .navbar-brand
  • added --logo-default-height custom property and :where(img:not([height])) rule
  • deleted .portal-logo styles and class="portal-logo" from demo

Testing

  1. npm run build:css
  2. npm start
  3. Open the s-header demo and verify logo sizing with both the SVG and raster variants

UI

default.state.mov
override.height.with.CSS.mov
override.height.with.HTML.mov

…efault height

- replace height with min-height on .navbar-brand so container can grow
  but never shrinks below --logo-default-height
- add --logo-default-height custom property (same calc as former rule)
- rename --height → --header-default-height for clarity
- add :where(& img:not([height])) rule with height: var(--logo-default-height)
  so SVGs don't overflow and PNGs don't balloon
- delete .portal-logo { height: 100% } (resolved against indefinite parent)
- remove class="portal-logo" from demo markup
@qodo-code-review

Copy link
Copy Markdown

Qodo reviews are paused for this user.

Troubleshooting steps vary by plan Learn more →

On a Teams plan?
Reviews resume once this user has a paid seat and their Git account is linked in Qodo.
Link Git account →

Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center?
These require an Enterprise plan - Contact us
Contact us →

@wesleyboar
wesleyboar merged commit 82f6c73 into main Jun 16, 2026
@wesleyboar
wesleyboar deleted the fix/s-header-logo-height branch June 16, 2026 22:42
wesleyboar added a commit to TACC/Core-CMS that referenced this pull request Jun 17, 2026
## Overview

Header logo plugin and settings fallback match Core-Portal link/img
classes. Portal logo picture template puts `portal-logo` on the image
(even if a link is set).

## Related

- supports #1083
- supports #999
- requires TACC/Core-Styles#648
- requires TACC/Core-Styles#649

## Changes

- **updated** header logo plugin render and settings fallback markup
- **added** Portal logo picture template and `picture_attributes_img` on
default Picture
- **updated** Header logo form defaults (Portal template when Core
Portal)
- **updated** `@tacc/core-styles` dev dep (temporary pin)

## Testing

1. Empty `header-content`: settings logo uses `navbar-brand` on `<a>`,
`portal-logo` on `<img>`.
2. With `PORTAL_IS_TACC_CORE_PORTAL`: add Header logo defaults to Portal
logo; published output has `portal-logo` on `<img>` and `navbar-brand`
on the link.
3. Core-Portal `/cms/header/logo/markup/` matches site logo for plugin
vs settings paths.

## UI


https://github.com/user-attachments/assets/4a186b0b-3625-4314-9154-2d6de6ffadc8


https://github.com/user-attachments/assets/dc629e0e-b4ec-4955-94a7-7c0b1cf91f84


https://github.com/user-attachments/assets/ec99e5e5-5d68-4db7-8e25-21ced4609bdf


https://github.com/user-attachments/assets/39368ab6-8995-4aec-83c7-ccf8b2d31962

## Notes

Bumped `@tacc/core-styles` to a published version after Core-Styles PRs
merge.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant