Olivero: body overflows when we show row widgets on the tablet(500-800) screen.

Adding screenshot for reference.

Can reproduce on the live preview. https://tugboat-aqrmztryfqsezpvnghut1cszck2wwasr.tugboat.qa/autocomplete

CommentFileSizeAuthor
#22 Screen Shot 2023-01-24 at 11.38.51 AM.png184.14 KBbnjmnm
#22 Screen Shot 2023-01-24 at 11.37.56 AM.png154.6 KBbnjmnm
#19 After_Patch_16.PNG31.31 KBgaurav-mathur
#19 Before_Patch_16.PNG54.07 KBgaurav-mathur
#16 3214000-16.patch1.16 KB_utsavsharma
#15 After_Patch.PNG20.75 KBgaurav-mathur
#15 Before_Patch.PNG20.19 KBgaurav-mathur
#8 3214000.8.patch1.11 KBsakthivel m
#7 interdiff-4_6.txt1.13 KBgauravvvv
#7 3214000-6.patch1.07 KBgauravvvv
#6 After-patch.png39.41 KBmitthukumawat
#6 Before-patch.png54.17 KBmitthukumawat
#4 3214000-4.patch1.07 KBgauravvvv
Screenshot 2021-05-14 at 16.55.16.png44.36 KBgauravvvv

Issue fork drupal-3214000

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

Gauravmahlawat created an issue. See original summary.

gauravvvv’s picture

gauravvvv commented
Issue summary: View changes
gauravvvv’s picture

gauravvvv commented
Issue summary: View changes
gauravvvv’s picture

gauravvvv commented
StatusFileSize
new 3214000-4.patch1.07 KB

Attached a patch for the same. Please review.

gauravvvv’s picture

gauravvvv commented
Status: Active » Needs review
mitthukumawat’s picture

mitthukumawat commented
StatusFileSize
new Before-patch.png54.17 KB
new After-patch.png39.41 KB

I have tested this patch manually and it applied cleanly for drupal 9.3.x-dev.
The body overflow issue resolved after this patch applied.
Adding screenshots for reference. RTBC+1

gauravvvv’s picture

gauravvvv commented
StatusFileSize
new 3214000-6.patch1.07 KB
new interdiff-4_6.txt1.13 KB

Patch updated.

sakthivel m’s picture

sakthivel m commented
StatusFileSize
new 3214000.8.patch1.11 KB

#8 Fixed Custom Commands Failed,

Please review the patch

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Title: Olivero: body overflows when we show row widgets on the mobile screen » Olivero: body overflows with tabledrag on mobile
Priority: Normal » Minor

Note that we don't support using Olivero as an admin theme. However, it is possible to surface this interface on the editing screen, so leaving this open.

xjm’s picture

xjm
she/her
Primary language English
commented
Priority: Minor » Normal

Normal priority bug under the normal issue priority definition:

Bugs for site visitors that do not interfere with site use, for example, visual layout issues.

(I would agree with minor if it were only for administrative users, but as mentioned tabledrag can also show up in the frontend theme.)

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

gaurav-mathur’s picture

gaurav-mathur commented
Assigned: Unassigned » gaurav-mathur
gaurav-mathur’s picture

gaurav-mathur commented
Assigned: gaurav-mathur » Unassigned
StatusFileSize
new Before_Patch.PNG20.19 KB
new After_Patch.PNG20.75 KB

Patch #8 applied for testing on Drupal 10.1.x-dev and PHP 8.1.6.
The patch not work properly for me,Css not apply on form.
Refer to screenshots.

_utsavsharma’s picture

_utsavsharma commented
StatusFileSize
new 3214000-16.patch1.16 KB

Fixed for 10.1.x.
Please review.

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

gaurav-mathur’s picture

gaurav-mathur commented
Assigned: Unassigned » gaurav-mathur
gaurav-mathur’s picture

gaurav-mathur commented
Assigned: gaurav-mathur » Unassigned
StatusFileSize
new Before_Patch_16.PNG54.07 KB
new After_Patch_16.PNG31.31 KB

I have tested #16 patch manually and it applied cleanly for 10.1.x-dev and PHP 8.1.6.
The "body overflows with tabledrag on mobile" issue resolved after this patch applied.
Adding screenshots for reference.

gauravvvv’s picture

gauravvvv commented

Updating attributions.

ameymudras’s picture

ameymudras commented
Status: Needs review » Reviewed & tested by the community

Reviewed on Drupal 10.1.x

1. The issue summary is clear and explains the problem well
2. Was able to reproduce on screen size provided in the description
3. Patch #16 applies cleanly
4. The body overflow issue is fixed after the patch is applied
5. No issues with the code

Skipping screenshots since its already provided in #19. Marking this issue as RTBC

bnjmnm’s picture

bnjmnm
he/him
Primary language English
Location Ann Arbor, MI
commented
Status: Reviewed & tested by the community » Needs work
StatusFileSize
new Screen Shot 2023-01-24 at 11.37.56 AM.png154.6 KB
new Screen Shot 2023-01-24 at 11.38.51 AM.png184.14 KB

With the patch applied, the select menu contents are unintelligible at certain widths.

It also looks like the overflow still happens although it does seem to happen differently as the contents shrink to accommodate the width of the table when previously it introduced horizontal scrolling. Not sure either are ideal.

In general, tables on narrow screens have been a major challenge in Drupal, particularly due to sticky headers being a fundamental part of many tables. This issue has chipped away at finding a solution for several years: #3068696: Tables overflow on mobile. Worth consulting what worked/didn't work there when pursuing a solution here.

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.

quietone’s picture

quietone commented
Title: Olivero: body overflows with tabledrag on mobile » body overflows with tabledrag on mobile
Status: Needs work » Postponed

The Olivero theme was approved for removal in #3590816: [policy, no patch] Deprecate Olivero and move to contrib.

This is Postponed. The status is set according to two policies. The Remove a core extension and move it to a contributed project and the Extensions approved for removal policies.

The deprecation work is in #3595082: [meta] Tasks to deprecate the Olivero theme and the removal work in #3595085: [meta] Tasks to remove the Olivero theme.

quietone’s picture

quietone commented
Project: Drupal core » Olivero
Version: main » 2.0.0
Component: Olivero theme » Code
Status: Postponed » Needs work
quietone’s picture

quietone commented
Version: 2.0.0 » 2.x-dev