fix(editor): Tune credential template layout (no-changelog) (#7903)

Add max width to the content and scale it based on that
This commit is contained in:
Tomi Turtiainen
2023-12-04 15:27:38 +02:00
committed by GitHub
parent 29e7a98f3e
commit 6448d4c8a5

View File

@@ -101,7 +101,6 @@ onMounted(async () => {
<template #content>
<div :class="$style.grid">
<div :class="$style.gridContent">
<div :class="$style.notice" data-test-id="info-callout">
<AppsRequiringCredsNotice v-if="isReady" />
<n8n-loading v-else variant="p" />
@@ -141,29 +140,17 @@ onMounted(async () => {
</div>
</div>
</div>
</div>
</template>
</TemplatesView>
</template>
<style lang="scss" module>
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
padding: 0 var(--spacing-l);
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
}
.gridContent {
grid-column: 3 / span 8;
@media (max-width: 800px) {
grid-column: 3 / span 8;
}
@media (max-width: 640px) {
grid-column: 2 / span 10;
}
max-width: 768px;
}
.notice {