GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-09-06 08:06:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: adapt custom css dialog height on small screens

Browse Source
This commit is contained in:
jxxghp
2026-05-18 11:55:10 +08:00
parent f4c4d7495f
commit e362f3cbdd
1 changed files with 28 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/dialog/CustomCssDialog.vue
+28 -6
View File
@@ -63,7 +63,7 @@ function submitCustomCSS() {
</script> </script>
<template> <template>
<VDialog v-if="visible" v-model="visible" max-width="50rem" scrollable :fullscreen="!display.mdAndUp.value"> <VDialog v-if="visible" v-model="visible" max-width="50rem" :fullscreen="!display.mdAndUp.value">
<VCard class="custom-css-dialog"> <VCard class="custom-css-dialog">
<VCardItem class="custom-css-header py-3"> <VCardItem class="custom-css-header py-3">
<template #prepend> <template #prepend>
@@ -76,7 +76,7 @@ function submitCustomCSS() {
</VCardTitle> </VCardTitle>
<VDialogCloseBtn v-model="visible" /> <VDialogCloseBtn v-model="visible" />
</VCardItem> </VCardItem>
<div> <div class="custom-css-editor-body">
<VAceEditor <VAceEditor
v-model:value="editableCSS" v-model:value="editableCSS"
lang="css" lang="css"
@@ -97,13 +97,22 @@ function submitCustomCSS() {
<style scoped> <style scoped>
.custom-css-dialog { .custom-css-dialog {
display: flex;
flex-direction: column;
max-block-size: calc(100dvh - 2rem);
overflow: hidden; overflow: hidden;
} }
.custom-css-header { .custom-css-header {
flex: 0 0 auto;
border-block-end: 1px solid rgba(var(--v-theme-on-surface), 0.08); border-block-end: 1px solid rgba(var(--v-theme-on-surface), 0.08);
} }
.custom-css-editor-body {
flex: 1 1 auto;
min-block-size: 0;
}
.custom-css-editor { .custom-css-editor {
overflow: hidden; overflow: hidden;
background: rgb(var(--v-theme-surface)); background: rgb(var(--v-theme-surface));
@@ -112,18 +121,31 @@ function submitCustomCSS() {
} }
.custom-css-actions { .custom-css-actions {
flex: 0 0 auto;
border-block-start: 1px solid rgba(var(--v-theme-on-surface), 0.08); border-block-start: 1px solid rgba(var(--v-theme-on-surface), 0.08);
padding-block: 0.875rem; padding-block: 0.875rem;
padding-inline: 1rem; padding-inline: 1rem;
} }
@media (width <= 600px) { @media (width <= 960px) {
.custom-css-body { .custom-css-dialog {
padding: 0.75rem; block-size: 100dvh;
max-block-size: 100dvh;
}
.custom-css-editor-body {
display: flex;
flex-direction: column;
} }
.custom-css-editor { .custom-css-editor {
block-size: calc(100dvh - 10rem); flex: 1 1 auto;
min-block-size: 0;
block-size: auto;
}
.custom-css-actions {
padding-block-end: max(0.875rem, calc(env(safe-area-inset-bottom) + 0.75rem));
} }
} }
</style> </style>