[pr] CSS bug met schrijven review

[amst3l]

browserversie, besturingssysteem en eventueel extensies

Bij zowel het wijzigen als schrijven van een review heb ik de volgende bug gespot;

Wanneer je op wijzig review (of schrijf review in het geval van een nieuwe) drukt klapt het invoer panel niet helemaal uit:
https://snipboard.io/BRvtFY.jpg

Zowel de modal als de container erin missen een waarde voor 'right':
https://snipboard.io/pjUJBS.jpg

Deze handmatig ophogen lost het probleem op.

Chrome versie: Version 116.0.5845.110
MacOS versie: 13.4.1 (c)

spoiler: Browser extensies

Talend API Tester - Free Edition : version 25_11_3
Web Store : version 0_2
Web Developer : version 0_5_5
Keep Awake : version 1_9
Vetted AI – GPT for Shopping : version 3_1_0
uBlock Origin : version 1_51_0
Clockwork : version 5_1_0
Session Buddy : version 3_6_5
Go Back With Backspace : version 2_1
Meta Pixel Helper : version 3_0_2
Word Counter Plus : version 1_2
Web Code Injector : version 3_0_2
Google Docs Offline : version 1_66_0
WP Hive | A Better WordPress Plugin Repo : version 1_0_2
Google Keep - Notes and Lists : version 4_23332_540_1
META SEO inspector : version 2_11_5
dataslayer : version 1_5_1
Analytics Debugger : version 2_3_5
SEO Extension [Metrics, Backlinks, On-Page] : version 2_2_19
WhatFont : version 2_1_0
Tag Assistant Companion : version 23_104_2_44
Chromebook Recovery Utility : version 3_3_0
Google Analytics Debugger : version 2_8
Window Resizer : version 2_6_4_2101
Marktplaats zonder spam : version 2_2_2_1
12ft Free : version 1_1_0
Core Web Vitals Visualizer : version 1_7
Chrome PDF Viewer : version 1
Wicked Good Unarchiver : version 2020_11_0_77
Google Network Speech : version 1_0
Google Hangouts : version 1_3_21
Chrome Web Store Payments : version 1_0_0_6
Bitwarden - Free Password Manager : version 2023_7_0
The Marvellous Suspender : version 7_1_6_2
ACF Tools : version 3_0_2
Material Theme Dark [blue-grey] : version 1_0
Clockify Time Tracker : version 2_10_1

[crisp]

Dit is de volledige code die we gebruiken voor de panel en het geanimeerd inschuiven:

Cascading Stylesheet:

@media screen and (min-width: 720px) {
  .modal.slide-in .modal__container {
    background-color: var(--surface-base-color);
    bottom: 0;
    left: auto;
    overflow: hidden;
    position: fixed;
    right: 0;
    scrollbar-gutter: auto;
    top: 0;
    transform: translateX(var(--slide-in-width));
    width: var(--slide-in-width);
  }

  .modal.slide-in[active] .modal__container {
    animation: slide-in 0.5s forwards;
    animation-delay: 0.1s;
  }

  @keyframes slide-in {
    100% { transform: translateX(0); }
  }
}

Je ziet dat we een right: 0 gebruiken, en dat de breedte in een variabele zit (staat op 720px) en dat we een transform gebruiken om de panel 'in te schuiven'.

Ik kan niet direct bedenken waarom dat bij jou niet goed werkt. Ik heb toch het vermoeden dat een van je extensies hier roet in het eten gooit. Wellicht zou je met het 1 voor 1 disablen van extensies kunnen achterhalen welke de mogelijke boosdoener is.