fix(plugin): align market detail actions on small screens

This commit is contained in:
jxxghp
2026-06-22 13:25:23 +08:00
parent 542e33d7b4
commit a9f4ec963b
@@ -228,7 +228,7 @@ onUnmounted(() => {
:text="props.plugin?.system_version_message || t('plugin.incompatibleSystemVersion')" :text="props.plugin?.system_version_message || t('plugin.incompatibleSystemVersion')"
/> />
<div class="plugin-market-detail-actions"> <div class="plugin-market-detail-actions">
<div> <div class="plugin-market-detail-actions__buttons">
<VBtn <VBtn
color="primary" color="primary"
@click="installPlugin()" @click="installPlugin()"
@@ -237,7 +237,7 @@ onUnmounted(() => {
> >
{{ t('plugin.installToLocal') }} {{ t('plugin.installToLocal') }}
</VBtn> </VBtn>
<VBtn variant="tonal" @click="showUpdateHistory" prepend-icon="mdi-update" class="ms-2"> <VBtn variant="tonal" @click="showUpdateHistory" prepend-icon="mdi-update">
{{ t('plugin.versionHistory') }} {{ t('plugin.versionHistory') }}
</VBtn> </VBtn>
</div> </div>
@@ -264,6 +264,14 @@ onUnmounted(() => {
gap: 0.75rem; gap: 0.75rem;
} }
.plugin-market-detail-actions__buttons {
/* 窄屏换行时用统一 gap 控制按钮间距,避免第二个按钮带左边距导致视觉偏移。 */
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem;
}
.plugin-market-detail-actions__downloads { .plugin-market-detail-actions__downloads {
flex-basis: 100%; flex-basis: 100%;
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)); color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
@@ -276,6 +284,10 @@ onUnmounted(() => {
justify-content: flex-start; justify-content: flex-start;
} }
.plugin-market-detail-actions__buttons {
justify-content: flex-start;
}
.plugin-market-detail-actions__downloads { .plugin-market-detail-actions__downloads {
text-align: start; text-align: start;
} }