Problem/Motivation

overlapping and sizing issue.

Steps to reproduce

Step1 : Install Drupal
Step2 : Set Olivero as the administration theme.
Step3 : Go to /admin/structure/display-modes/view
You will be able to see the issue.
issue

Proposed resolution

.dropbutton-action a {
display: flex
    align-items: center;
    padding: 0 0.5625rem;
    -webkit-text-decoration: none;
    text-decoration: none;
    color: var(--dropbutton--text-color);
    font-weight: 600;
    height: auto;
    margin: 2px;
}

We can update the CSS to achieve this.

Only local images are allowed.

Remaining tasks

User interface changes

Introduced terminology

API changes

Data model changes

Release notes snippet

CommentFileSizeAuthor
#26 3490425-nr-bot.txt1.29 KBneeds-review-queue-bot
#24 D11_after.png255 KBfilipeabreu
#24 D11_before.png244.25 KBfilipeabreu
#22 02.png136.44 KBeric.vvf
#22 01.png114.67 KBeric.vvf
#21 dropdown-overlap.png210.08 KBchandansha
#18 Screenshot 2024-12-02 at 3.27.39 PM.png861.85 KBsaurav-drupal-dev
#18 Screenshot 2024-12-02 at 3.27.44 PM.png858.28 KBsaurav-drupal-dev
issue.png92.26 KBdjsagar
Proposed resolution.png104.22 KBdjsagar

Issue fork drupal-3490425

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

djsagar created an issue. See original summary.

deepali sardana’s picture

deepali sardana commented
Assigned: Unassigned »
djsagar’s picture

djsagar commented
Issue summary: View changes
djsagar’s picture

djsagar commented
Issue summary: View changes
djsagar’s picture

djsagar commented
Issue tags: +Novice
deepali sardana’s picture

deepali sardana commented
Assigned: » Unassigned
djsagar’s picture

djsagar commented
Issue summary: View changes
djsagar’s picture

djsagar commented
Priority: Major » Minor
cilefen’s picture

cilefen commented
Component: CSS » Olivero theme
deepali sardana’s picture

deepali sardana commented
Assigned: Unassigned »
deepali sardana’s picture

deepali sardana commented
Assigned: » Unassigned

harivansh made their first commit to this issue’s fork.

harivansh’s picture

harivansh commented
Status: Active » Needs review

harivansh opened merge request !10391

quietone’s picture

quietone commented
Version: 11.1.x-dev » 11.x-dev

Changes are made on on 11.x (our main development branch) first, and are then back ported as needed according to our policies.

smustgrave’s picture

smustgrave commented
Status: Needs review » Needs work

MR needs work, issue summary is incomplete for a UI change

saurav-drupal-dev made their first commit to this issue’s fork.

saurav-drupal-dev’s picture

saurav-drupal-dev commented
StatusFileSize
new Screenshot 2024-12-02 at 3.27.44 PM.png858.28 KB
new Screenshot 2024-12-02 at 3.27.39 PM.png861.85 KB

The issue is fixed using suggested resolution.

.dropbutton-action a {
    display: flex
    align-items: center;
    padding: 0 0.5625rem;
    -webkit-text-decoration: none;
    text-decoration: none;
    color: var(--dropbutton--text-color);
    font-weight: 600;
    height: auto;
    margin: 2px;
}

fixed

fixed

saurav-drupal-dev’s picture

saurav-drupal-dev commented
Status: Needs work » Needs review

saurav-drupal-dev opened merge request !10418

chandansha’s picture

chandansha commented
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new dropdown-overlap.png210.08 KB

I have tested MR 10418. Now it's look good but its overlaping blelow button.
For now it's Done.
I move it to RTBC.
THANKS!!

eric.vvf’s picture

eric.vvf commented
StatusFileSize
new 01.png114.67 KB
new 02.png136.44 KB

The proposed resolution works great!

Drupal 10.3.10

Before
Before

After
After

mandymeng’s picture

mandymeng commented
Issue tags: +DrupalNYCContributionDay

Tested on local env and it works. Great work!

filipeabreu’s picture

filipeabreu
Location Campinas/SP
commented
StatusFileSize
new D11_before.png244.25 KB
new D11_after.png255 KB

I tested the proposed resolution in my local setup and worked as expected!

Local setup settings:

  • Drupal 11.1.0
  • Web Server: nginx/1.26.1
  • PHP: 8.3.10
  • Database: MariaDB 10.11.8




Before:
D11 Before

After:
D11 After

quietone’s picture

quietone commented
Title: There is an issue with the dropdown button action overlapping in display view mode. » In display view mode the dropdown buttons overlap

In display view mode the dropdown buttons overlap

needs-review-queue-bot’s picture

needs-review-queue-bot commented
Status: Reviewed & tested by the community » Needs work
StatusFileSize
new 3490425-nr-bot.txt1.29 KB

The Needs Review Queue Bot tested this issue. It fails the Drupal core commit checks. Therefore, this issue status is now "Needs work".

This does not mean that the patch necessarily needs to be re-rolled or the MR rebased. Read the Issue Summary, the issue tags and the latest discussion here to determine what needs to be done.

Consult the Drupal Contributor Guide to find step-by-step guides for working with issues.

sandip’s picture

sandip commented

I am Working on it to fix the CSS linting (stylelint) pipeline.

sandip’s picture

sandip commented
Status: Needs work » Needs review

Fix the CSS linting (stylelint) pipeline.

Note: Only dropbutton.pcss.css should be modified. The corresponding dropbutton.css file is auto-generated via yarn run build:css. Manual changes to the .css file are not required; edits should be made solely to the .pcss.css source.

smustgrave’s picture

smustgrave commented
Status: Needs review » Postponed (maintainer needs more info)

What's the use case for using olivero as an admin theme? It wasn't designed to be an admin theme so believe this is a won't fix.

smustgrave closed merge request !10391

smustgrave closed merge request !10418

smustgrave’s picture

smustgrave commented
Status: Postponed (maintainer needs more info) » Closed (won't fix)
Issue tags: +Bug Smash Initiative

As mentioned Olivero wasn't intended as an admin theme