Problem/Motivation

On entity edit forms, Gin styles Field Group's horizontal-tabs widget so the subtabs
sit inside a contained card, visually separated from the page's primary task tabs above. On entity
view displays the same Field Group tabs render flat, without that separation.

This is confusing when both task tabs and field-group subtabs are visible on the same page (e.g. the
user view page with field groups configured on the view display) — the field-group tab strip blends into
the task tabs above it, and it's not obvious which set of tabs you're looking at.

Steps to reproduce

  1. Install Gin and Field Group.
  2. On an entity type (e.g. User), configure the default view display to wrap fields in a
    Horizontal Tabs field group.
  3. View an entity of that type as a user who also sees task tabs (View / Edit / etc.).
  4. Compare with the equivalent edit form, where the field-group tabs sit inside a styled card.

Proposed resolution

Apply the same card chrome to .field-group-tabs-wrapper unconditionally, so the visual
treatment of view and edit matches across all entity types. In dark mode, use --gin-bg-layer3
rather than --gin-bg-layer2, because bg-layer2 shares its value with
--gin-bg-input and would make unchecked toggle switches (and other inputs) invisible against
the card.

Working CSS from a Gin sub-theme:

.field-group-tabs-wrapper {
    background-color: var(--gin-bg-layer);
    border: 1px solid var(--gin-border-color);
    border-radius: var(--gin-border-l);
    padding: var(--gin-spacing-m) var(--gin-spacing-l);
    margin-block-start: var(--gin-spacing-m);
  }

  /* Pull horizontal-tabs back inside the card padding so its tab strip aligns
     with the card edge rather than indenting from it. */
  .field-group-tabs-wrapper .horizontal-tabs {
    margin-block-start: 0;
  }

  /* Dark mode: bg-layer is too close to the page background, but bg-layer2 is
     the same value as --gin-bg-input — using it would make unchecked toggle
     switches (and other inputs) invisible against the card. bg-layer3 sits
     one shade above the input background. */
  .gin--dark-mode .field-group-tabs-wrapper {
    background-color: var(--gin-bg-layer3);
  }

Remaining tasks

  • Confirm the approach (unconditional styling vs. scoping to non-edit contexts).
  • Roll into Gin's existing field-group / horizontal-tabs CSS.
  • Open an MR against 5.x.
  • Figure out how we handle this in 6.x/core.

User interface changes

Field-group horizontal-tabs on entity view displays gain the same card chrome already used on entity
edit forms. No change to edit-form rendering.

Comments

colan created an issue. See original summary.

debdeep.mukhopadhyay’s picture

I am working on this.

debdeep.mukhopadhyay’s picture

Hello @colan,
I tested this using Drupal 11 and Gin 5.x along with Field Group 4.x modules in my local setup. Although I managed to get the horizontal tabs set up for both Form Display,Manage Display and tested with the User entity as mentioned in the issue description but not find any inconsistency. Can you please guide me for the proper reproduction method or I miss anything?

colan’s picture

Issue summary: View changes
StatusFileSize
new16.9 KB

That's pretty much it: The Edit tab has the card that the subtabs sit in, but when you go to the View tab, there isn't one of these for the subtabs. Here's what it looks like on the User page with the fix:

Without it, the subtabs don't have a card with its own spacing (and colour), so they're pushing up right against the main tabs. (Sorry, don't have easy access to a screenshot of that right now, but compare with what you can produce.

The Edit tab already does this.

debdeep.mukhopadhyay’s picture

Hello @colan,

Sorry for little late response,I had tested this again in my local and my result seems slightly different from the reported issue.

On my side, the View page already shows the subtabs inside a proper card/wrapper, but the Edit page needed the exact CSS change to get the expected card styling.

I’ve attached screenshots for comparison showing:

current behavior in my setup
behavior after applying the CSS change
and also the view page style

Can you please confirm if this is the same issue you intended to fix? If yes, I can prepare an MR with the CSS fix.