Problem/Motivation

After updating to Drupal 10.4.0 with new styles from Claro or Gin
This issue was captured by the "Automated Functional Acceptance Testing group - 04 content structure"
with screens with a small heights like ( Ultrawide and wide 15" or 17" ) 1600x1200x24
https://app.circleci.com/pipelines/github/Vardot/varbase/1016/workflows/...

Steps to reproduce

Scenario: Check if a site admin can create a landing page and add sections to it with different container types
Given I am a logged in user with the "Site admin" user
When I go to "/node/add/landing_page_lb"
And I wait
Then I should see "Create Landing page (Layout Builder)"
When I fill in "Test Landing page (Layout Builder) by Site Admin" for "Title"
And I fill in "Test Landing page (Layout Builder) description" for "Page description"
And I select "published" from "Save as"
And I press the "Save" button
And I wait
Then I should see "Landing page (Layout Builder) Test Landing page (Layout Builder) by Site Admin has been created"
And I should see "This layout builder tool allows you to configure the layout of the main content area."
When I scroll to the bottom of the page
And I wait 1s
Then I should see "Add section at end of layout"
When I add a basic "2 Cols" section at the end of layout
And I select the "Boxed" container type with a "Medium" width
And I select the "md" "33% 67%" section breakpoint
And I add section gutters
Then I should not see "Keep gutters between columns"
And I wait for AJAX to finish
And I select the "Light" section background color
And I uncheck the Edge to Edge Background
And I select the "Dark" section text color
And I set the alignment to "End"
And I scroll to bottom of "#drupal-off-canvas"
And I save the section
And I wait for AJAX to finish
Then I should see "Add block in Section 2, Col 1 region"
When I scroll to the bottom of the page
And I wait 2s
Then I should see "Add section at end of layout"
When I click "Add block in Section 2, Col 1 region"
And I wait for AJAX to finish
And I click "Create content block"
And I wait for AJAX to finish
And I click "Rich text"
And I wait for AJAX to finish
And I check the box "Display title"
And I fill in "Test Rich text in 2 cols section, col 1" for "Title"
And I fill in the rich text editor field "Body" with "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquet diam nunc, ac dictum velit tincidunt quis. Integer ut imperdiet dui, sit amet tempus est. Curabitur molestie sem non purus dignissim pulvinar. Pellentesque id sapien consequat"
And I scroll to the bottom of the page
And I wait 1s
And I press the "Add block" button

❌
      element not interactable
        (Session info: chrome=131.0.6778.204)
      Build info: version: '4.4.0', revision: 'e5c75ed026a'
      System info: host: '06eaf5d338da', ip: '10.89.1.3', os.name: 'Linux', os.arch: 'amd64', os.version: '6.8.0-1020-aws', java.version: '11.0.25'
      Driver info: driver.version: unknown (WebDriver\Exception\ElementNotInteractable)

Before the fix Varbase 9

Before the fix Varbase 10

Proposed resolution

  • Move the Scroll overflow for the BLB to from the layout-builder-modal to the blb tab-content, ensure that only the tab content area scrolls, leaving the rest of the layout static.
  • Make the "Add Block" and "Update" buttons always visible.

Remaining tasks

  • ✅ File an issue about this project
  • ✅ Addition/Change/Update/Fix to this project
  • ✅ Testing to ensure no regression
  • ➖ Automated unit/functional testing coverage
  • ➖ Developer Documentation support on feature change/addition
  • ➖ User Guide Documentation support on feature change/addition
  • ➖ UX/UI designer responsibilities
  • ➖ Accessibility and Readability
  • ✅ Code review from 1 Varbase core team member
  • ✅ Full testing and approval
  • ✅ Credit contributors
  • ✅ Review with the product owner
  • ✅ Update Release Notes and Update Helper on new feature change/addition
  • ✅ Release varbase-10.0.4, varbase_layout_builder-10.1.7, varbase-9.1.8, varbase_layout_builder-10.0.60

Varbase update type

  • ✅ No Update
  • ➖ Optional Update
  • ➖ Forced Update
  • ➖ Forced Update if Unchanged

User interface changes

After the fix: Varbase 9

After the fix: Varbase 10

API changes

  • N/A

Data model changes

  • N/A

Release notes snippet

  • Issue #3497720: Fixed not intractable Add block and Update element action buttons for layout builder modal

Comments

rajab natshah created an issue. See original summary.

rajab natshah’s picture

Issue summary: View changes
rajab natshah’s picture

Version: 9.0.x-dev » 10.0.x-dev

  • rajab natshah committed 69c90fbb on 10.1.x
    Issue #3497720: Fix not  intractable Add block and Update element action...
rajab natshah’s picture

Title: Fix not intractable Add block and Update element action buttons for layout builder modal » Fix not intractable Add block and Update element action buttons for layout builder modal

  • rajab natshah committed 6728df23 on 10.2.x
    Issue #3497720: Fix not  intractable Add block and Update element action...

  • rajab natshah committed df207fd1 on 10.0.x
    Issue #3497720: Fix not intractable Add block and Update element action...
rajab natshah’s picture

Assigned: rajab natshah » Unassigned
Issue summary: View changes
Status: Active » Needs review
Issue tags: +varbase-10.0.4, +varbase_layout_builder-10.1.7, +varbase-9.1.8, +varbase_layout_builder-10.0.60
rajab natshah’s picture

Issue summary: View changes
rajab natshah’s picture

Status: Needs review » Fixed
rajab natshah’s picture

Issue summary: View changes
rajab natshah’s picture

Issue summary: View changes
rajab natshah’s picture

Removing unnecessary steps in Layout Builder Automated Testing Scenarios

And I scroll to the bottom of the page
And I wait 1s
rajab natshah’s picture

Issue summary: View changes

✅ Released varbase-9.1.8

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

rajab natshah’s picture

Issue summary: View changes

✅ Released varbase-10.0.4