@saurav-drupal-dev

Here's a quick approach to tackle page jank:
1. CSS Fixes:
Reserve Space for Content: Use min-width, min-height, or aspect-ratio for images and iframes to prevent layout shifts.

img, iframe {
  min-width: 100px;
  min-height: 100px;
  aspect-ratio: 16/9;
}


Font Loading: Use font-display: swap to avoid layout shifts caused by late-loading fonts.
@font-face {
  font-display: swap;
}

Smooth Animations: Apply fade-in animations for dynamically loaded content to avoid sudden jumps.

.dynamic-content {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.dynamic-content.loaded {
  opacity: 1;
}

2. JS Fix:
Add a loaded class to dynamically added elements after the page loads to trigger smooth transitions.

document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.dynamic-content').forEach(el => el.classList.add('loaded'));
});

3. Drupal Setup:
Add the CSS/JS to a custom module or theme to apply across pages.

4. Testing:
Monitor metrics like Cumulative Layout Shift (CLS) to ensure improvements.
Let me know what you think!

unable to reproduce the issue

not reproducible on 11 and the repo current version is also 11.x-dev. so is this need fix for older version 10.4 ??

unable to reproduce can u add a screenshot so it will be helpful

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

To clarify, are there scenarios where the vertical-tabs-menu-width variable isn't available globally in other themes, or is this issue limited to Claro? It might be helpful to confirm if adding the dependency solves similar cases across custom themes or if this fix should be strictly scoped to the Claro theme.

I noticed that the current regex excludes stream wrappers. Could you clarify the reasoning behind this exclusion? Are there specific edge cases or security concerns being considered here? It might be helpful to document these in the code comments for better clarity.

Also, regarding the test cases—are there any guidelines or examples for contributors who want to run specific tests and update the fixture data? Clear instructions could encourage more contributors to test and validate this feature.

Thank you for raising this issue and for the detailed explanation! I agree that introducing reusable CSS classes for text colors in the Claro admin theme would greatly benefit module maintainers and improve consistency across the admin interface.

Here are a few suggestions to enhance the proposed solution:

Extend the existing core/themes/claro/css/theme/colors.css to separate colors meant specifically for text (e.g., .text-success, .text-warning, etc.). This would make it more intuitive for module developers to apply styles.
Consider providing utility classes for both text color and background color (e.g., .bg-success) so developers have flexibility depending on the use case.
Document the new classes in the Claro theme documentation. Including usage examples would encourage adoption.

I can help test or contribute to this implementation. Let me know how I can assist further!

did u logged in using admin account or its just a normal account without admin access because i am not able to reproduce the issue here.

please share a short video of the issue. thanks

Agree with @preeti.chawla i was about to create MR on this but when i followed step to reproduce i found the fix already there on body element check SS. let me know if i am missing something here.

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

Got it!! Thanks :) @smustgrave

Issue Fixed for me applied MR manually. RTBC+

I faced a similar issue with the improper position of the progress throbber. After investigating, here’s how I fixed it:

1.CSS Fix
I inspected the element in DevTools and found conflicting styles. Adding the following CSS resolved the alignment issue: css

.progress-wrapper {
position: relative;
margin: 0 auto;
text-align: center;
}
.progress-bar {
display: inline-block;
}
@media (max-width: 768px) {
.progress-bar {
width: 90%;
}
}

I have fixed the issue please test and review

Before

After

saurav-drupal-dev → created an issue.

I have fixed the alignment issue please test and review

Before

After

saurav-drupal-dev → changed the visibility of the branch 3495089-content-preview-popup to hidden.

saurav-drupal-dev → changed the visibility of the branch 3495089-preview-popup-button-alignment-fix to hidden.

saurav-drupal-dev → created an issue.

I have only changed "Install and set as Default" icon because set as default has already checkmark icon for it so its better changing only needed one. please review and let me know if there is any changes needed.

saurav-drupal-dev → changed the visibility of the branch 3318529-install-and-default-icon-update to active.

saurav-drupal-dev → changed the visibility of the branch 3318529-install-and-default-icon-update to hidden.

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

please add steps to reproduce

Unable to reproduce the issue

Reviewed the MR RTBC+1

I tried to replicate the issue but didn't found it. this might be fixed or m i missing something here?

@giannis makantasis the css should come inside toolbar file because we cannot access dropdown without the admin toolbar. but i am unable to reproduce the issue.

Hi i have tested the MR from #47 its working fine for me.

step followed --
1. enable date module
2. added date range field to any content type
3. create node using that content type
4. fill all field only leave the date one empty

Result--
the node saves fine without form validation error.

MR worked for me RTBC+1

unable to reproduce the issue.

anyone has any suggestion on it?

I have updated the robot txt file please review.

Working

ita a test

saurav-drupal-dev → created an issue.

RTBC +1
Issue is Fixed.

i have fixed the issue mentioned @djsagar

before

after

The issue is still not fixed for me i had to manually check the 'Show add more button' then the add more button is appearing.

the issue was still reproducible for me created MR for it.

Before Fix

After Fix

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

Hi @bnjmnm

the issue you mentioned i am unable to reproduce let me know if i am missing something.

step i followed --

1.go to taxonomy
2.click on any list term
3.add 3 terms used one of them to nest inside one term.

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;
}

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

I have tested the issue its fixed RTBC+ also pipeline lint issue is fixed as well.

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

please add more details so i can understand clearly and update the step to reproduce (if any).

please correct me if i am on wrong direction as far i understood to fix the alignment how about using padding or transparent border to align it in middle.

please correct me if i am on wrong direction as far i understood to fix the alignment how about using padding or transparent border to align it in middle.

Created MR frpm comment #9

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

unable to reproduce the issue please update IS and Step to reproduce.

unable to reproduce.
step followed --
- Install gin 8.x-3.0-rc14, set as admin theme
- Attach an ajax callback to e.g. the node form "Preview" button
- Observe that no progress indicator is visible:

loader is visible to me.

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

@mherchel this will not affect other css because i have used media query for that so i will only apply 100% when the device goto smaller devices where we are using with 100%

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

You're right that using H2 tags for the Main Menu and Breadcrumbs could have SEO implications, as it may disrupt the heading hierarchy of the page.

The H2 tags are likely coming from the theme's default Twig template for these elements. To fix this, you can override the menu.html.twig or breadcrumb.html.twig file in your theme:

{# menu--main.html.twig #}
<nav class="menu">
  <ul>
    {% for item in items %}
      <li>{{ item.title }}</li>
    {% endfor %}
  </ul>
</nav>

This change ensures proper semantic structure while maintaining accessibility. Don't forget to clear the cache after applying the changes!
Let me know if you'd like further assistance with testing or creating a patch."

Hi,

I have created MR from comment #14 patch for 11.x version.

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

Create MR from patch 312636-9.patch

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

Hi @jayemel i have gone through the code structure of claro theme found out these classes are already using some unique selectors like card is getting used with hypens also if we are creating custom theme we can keep different classes because we have easy control there instead of changing in core themes template and style files. let me know if you have any other ideas.

I have started working on this issue updating claro theme classes according to BEM Classes.

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

for me i am unable to find the sidebar region in block layout

create MR for button fix.

step followed--

1. For example, using the Admin content view (/admin/content)
2. Edit the Admin content view (/admin/structure/views/view/content)
3. Set Exposed form style to Input required
4. Set Use AJAX to Yes
5. Save the view
6. Navigate to Admin content view (/admin/content)
7. Input a value in the Title filter that produces a result, and see the grey background on Operations links

Before

After

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

tried creating MR form comment 16 patch but after creating new branch i am unable to fetch it correctly stuck in between

created MR from comment #3 patch still need to update issue summary and steps to reproduce. so i can test the issue and i have added template for it.

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

tried with logged in logged out but unable to reproduce please add more info on how to reproduce.

Added MR for the 11.x version from #27 patch

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

please add more info on the ticket

how about keeping the box shadow and decrease the height or padding to match the alignment? @all

unable to reproduce the issue please check the attachment.

Steps followed
Create a content type with a mandatory media field
Create a new item of content of this type but fail to add a media item.
Click on save and see that the error is reported at the top but that the field is not highlighted in a red border with red label text as other field types.

unable to reproduce the issue please add more info

please add steps to reproduce

Hi ,

i have added style to the footer after adding blocks to the footer regions MR was not possible for me this to so created patch

Before

After