bc7e1faa1c
This commit resolves an issue causing horizontal UI layout shift when a script is selected for the first time, and when all selected scripts are deselected. This issue was only observed on Chromium-based browsers on Linux environment when using macOS and Windows script collections. The underlying cause was identified as the use of percentage-based values for CSS margin and padding. To resolve this issue, these values were updated to absolute measurements. This adjustment maintains layout consistency across user interactions without compromising the responsiveness. The underlying cause was identified as the use of percentage-based values for CSS margin and padding within certain elements. To resolve this issue, these values were updated to absolute measurements. This adjustment maintains layout consistency across user interactions without compromising the responsiveness of the application. Additionally, an end-to-end (E2E) test has been introduced to monitor for future regressions of this layout shift bug, ensuring that the fix remains effective over subsequent updates.
94 lines
2.5 KiB
Vue
94 lines
2.5 KiB
Vue
<template>
|
|
<div id="app">
|
|
<div class="app__wrapper">
|
|
<TheHeader class="app__row" />
|
|
<TheSearchBar class="app__row" />
|
|
<TheScriptArea class="app__row" />
|
|
<TheCodeButtons class="app__row app__code-buttons" />
|
|
<TheFooter />
|
|
</div>
|
|
<component
|
|
:is="devToolkitComponent"
|
|
v-if="devToolkitComponent"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineAsyncComponent, defineComponent, type Component } from 'vue';
|
|
import TheHeader from '@/presentation/components/TheHeader.vue';
|
|
import TheFooter from '@/presentation/components/TheFooter/TheFooter.vue';
|
|
import TheCodeButtons from '@/presentation/components/Code/CodeButtons/TheCodeButtons.vue';
|
|
import TheScriptArea from '@/presentation/components/Scripts/TheScriptArea.vue';
|
|
import TheSearchBar from '@/presentation/components/TheSearchBar.vue';
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
TheHeader,
|
|
TheCodeButtons,
|
|
TheScriptArea,
|
|
TheSearchBar,
|
|
TheFooter,
|
|
},
|
|
setup() {
|
|
const devToolkitComponent = getOptionalDevToolkitComponent();
|
|
|
|
return {
|
|
devToolkitComponent,
|
|
};
|
|
},
|
|
});
|
|
|
|
function getOptionalDevToolkitComponent(): Component | undefined {
|
|
const isDevelopment = process.env.NODE_ENV !== 'production';
|
|
if (!isDevelopment) {
|
|
return undefined;
|
|
}
|
|
return defineAsyncComponent(() => import('@/presentation/components/DevToolkit/DevToolkit.vue'));
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@use "@/presentation/assets/styles/main" as *;
|
|
@use 'sass:math';
|
|
|
|
@mixin responsive-spacing {
|
|
$spacing-absolute-small: math.div($base-spacing, 2);
|
|
$spacing-absolute-extra-small: math.div($base-spacing, 4);
|
|
// Avoid using percentage-based values for spacing the avoid unintended layout shifts.
|
|
margin-left: $base-spacing;
|
|
margin-right: $base-spacing;
|
|
@media screen and (max-width: $media-screen-big-width) {
|
|
margin-left: $spacing-absolute-small;
|
|
margin-right: $spacing-absolute-small;
|
|
}
|
|
@media screen and (max-width: $media-screen-medium-width) {
|
|
margin-left: $spacing-absolute-extra-small;
|
|
margin-right: $spacing-absolute-extra-small;
|
|
}
|
|
padding: $spacing-absolute-small;
|
|
}
|
|
|
|
#app {
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
max-width: 1600px;
|
|
.app__wrapper {
|
|
background-color: $color-surface;
|
|
color: $color-on-surface;
|
|
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.06);
|
|
|
|
@include responsive-spacing;
|
|
|
|
display:flex;
|
|
flex-direction: column;
|
|
.app__row {
|
|
margin-bottom: 10px;
|
|
}
|
|
.app__code-buttons {
|
|
padding-bottom: 10px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|