Editing views the display tabs are not rendering as expected in a flex grid.
Rather it is in an unordered list with bulleted li items.
I recently upgraded to Drupal 10.3
And I suspect that the default admin theme may have changed.
Both the tabbing lists and the add new view display appear to be affected.
Edit any views configuration and see the header affected.
Inspecting the Sass,
/styles/base/_views.scss
- line 175
May be the place to start.
.views-display-top {
padding: var(--gin-spacing-m);
background-color: var(--gin-bg-header);
border: 0 none;
border-radius: var(--gin-border-l);
// #3186729: Drupal 9.1 fix
&__extra-actions-wrapper {
margin-bottom: 0;
}
.dropbutton-wrapper {
top: 20px;
right: var(--gin-spacing-l);
}
}
#edit-displays {
.views-display-top {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
}
.edit-display-settings {
padding: var(--gin-spacing-l);
margin: 0;
}
.views-tabs {
a {
padding: var(--gin-spacing-xs) var(--gin-spacing-m);
&.views-display-disabled-link {
padding-inline-start: var(--gin-spacing-l);
&::before {
mask-image: icon('hide');
mask-repeat: no-repeat;
mask-position: center left;
mask-size: contain;
width: var(--gin-spacing-l);
height: var(--gin-spacing-s);
margin-inline-start: calc(var(--gin-spacing-m) * -1);
background-color: currentColor;
display: inline-block;
content: '';
}
}
}
.add a,
li a {
font-size: var(--gin-font-size-xs);
font-weight: var(--gin-font-weight-heavy);
color: var(--gin-color-primary);
padding: var(--gin-spacing-xs) var(--gin-spacing-m);
background: transparent;
border: 2px solid var(--gin-color-primary);
border-radius: var(--gin-border-xs);
&::before {
display: none;
}
.icon.add {
display: block;
}
}
.add a:hover,
.add a:focus,
li a:hover,
li a:focus,
li.is-active a,
li.is-active a.is-active {
color: var(--gin-bg-app);
background: var(--gin-color-primary);
border-color: transparent;
}
.add a:focus,
li a:focus {
outline: none;
box-shadow: 0 0 0 1px var(--gin-color-focus-border), 0 0 0 4px var(--gin-color-focus);
}
.add {
&.open {
a {
background: var(--gin-bg-layer2);
color: var(--gin-color-primary);
&:hover, &:focus, &:active {
color: var(--gin-color-primary);
}
}
}
}
.action-list {
top: 36px;
background: var(--gin-bg-layer3);
box-shadow: 0 1px 2px var(--gin-shadow-button);
li {
background-color: transparent;
border: none;
input.button {
width: 100%;
text-align: left;
line-height: 1.2;
box-shadow: none;
border: none !important;
}
&:hover, &:focus, &:active {
&,
input.button {
color: var(--gin-color-button-text);
background: var(--gin-color-primary);
}
}
}
}
}
Perhaps adding a ul { display: flex; } and for the li removing the list-styles inherited from the default admin theme.
And ensuring the li or a tags are displayed inline-blocks or inline-flex?
Anyone else experience this issue?
Closed: duplicate
Code
Closing as duplicate, this is a Core issue, see 🐛 Views fieldset labels do not render css when adding entity reference. Needs review