Skip to content

Scope of tabs is visually unclear #173

Description

@timhoffm

Context

The tab content is only bounded by a top and bottom line. It's difficult to associate the bottom line with the end of the tab area.

Example: https://matplotlib.org/stable/devel/development_setup.html#create-a-dedicated-environment

grafik

Proposal

The tab scope should be visually more clear.

I suggest to draw a full box, e.g.

grafik

which I generated using the (not necessarily best) CSS:

  border-left: 0.0625rem solid var(--sd-color-tabs-underline);
  padding-left: 0.5rem;
  border-right: 0.0625rem solid var(--sd-color-tabs-underline);
  padding-right: 0.5rem;

Alternatively, one could add a background color to the tab content, but this may make consistent color styling harder.

Tasks and updates

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions