danvics/ytptube
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

refactor: fix card width in mobile

Browse source
This commit is contained in:
arabcoders 2026-06-22 03:49:50 +03:00
parent 52d6672fb3
commit e14387e399
12 changed files with 682 additions and 663 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
ui/app/assets/css/tailwind.css
View file

@ -100,42 +100,42 @@
}
.ytp-card {
@apply rounded-lg border bg-elevated/20;
@apply min-w-0 max-w-full rounded-lg border bg-elevated/20;
border-color: var(--ytp-surface-border-soft);
}
.ytp-card-padded {
@apply rounded-lg border bg-elevated/20 p-4;
@apply min-w-0 max-w-full rounded-lg border bg-elevated/20 p-4;
border-color: var(--ytp-surface-border-soft);
}
.ytp-card-padded-lg {
@apply rounded-lg border bg-elevated/20 p-4 sm:p-5;
@apply min-w-0 max-w-full rounded-lg border bg-elevated/20 p-4 sm:p-5;
border-color: var(--ytp-surface-border-soft);
}
.ytp-panel {
@apply rounded-lg border;
@apply min-w-0 max-w-full rounded-lg border;
border-color: var(--ytp-surface-border-soft);
}
.ytp-panel-padded {
@apply rounded-lg border p-4;
@apply min-w-0 max-w-full rounded-lg border p-4;
border-color: var(--ytp-surface-border-soft);
}
.ytp-panel-padded-lg {
@apply rounded-lg border p-4 sm:p-5;
@apply min-w-0 max-w-full rounded-lg border p-4 sm:p-5;
border-color: var(--ytp-surface-border-soft);
}
.ytp-frame {
@apply rounded-lg border;
@apply min-w-0 max-w-full rounded-lg border;
border-color: var(--ytp-surface-border-soft);
}
.ytp-table-surface {
@apply rounded-sm border bg-elevated/20;
@apply min-w-0 max-w-full rounded-sm border bg-elevated/20;
border-color: var(--ytp-surface-border-solid);
}

2
ui/app/components/LogDetailModal.vue
View file

@ -221,7 +221,7 @@
>
<button
type="button"
class="grid w-full grid-cols-[minmax(0,1fr)_auto] items-center gap-3 px-3 py-2 text-left sm:grid-cols-[minmax(0,12rem)_minmax(0,1fr)]"
class="grid w-full grid-cols-[minmax(7rem,0.45fr)_minmax(0,1fr)] items-center gap-3 px-3 py-2 text-left sm:grid-cols-[minmax(0,12rem)_minmax(0,1fr)]"
@click="toggleField(field.key)"
>
<span

11
ui/app/components/SettingsPanel.vue
View file

@ -408,6 +408,10 @@ const toastPositionItems: Array<{ label: string; value: toastPosition }> = [
{ label: 'bottom-right', value: 'bottom-right' },
];
const closeScrollLock = (): void => {
document.body.classList.remove('settings-panel-open');
};
const handleKeydown = (e: KeyboardEvent) => {
if ('Escape' === e.key && props.isOpen) {
e.preventDefault();
@ -427,7 +431,10 @@ onMounted(async () => {
document.addEventListener('keydown', handleKeydown);
});
onBeforeUnmount(() => document.removeEventListener('keydown', handleKeydown));
onBeforeUnmount(() => {
document.removeEventListener('keydown', handleKeydown);
closeScrollLock();
});
const onNotificationTargetChange = async (): Promise<void> => {
if ('browser' === toast_target.value) {
@ -448,7 +455,7 @@ watch(
draftMode.value = mode.value;
document.body.classList.add('settings-panel-open');
} else {
document.body.classList.remove('settings-panel-open');
closeScrollLock();
}
},
);

6
ui/app/pages/browser/[...slug].vue
View file

@ -315,7 +315,11 @@
</div>
<div v-else-if="hasItems" class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
<div v-for="item in filteredItems" :key="item.path" class="ytp-card flex h-full flex-col">
<div
v-for="item in filteredItems"
:key="item.path"
class="ytp-card flex h-full flex-col overflow-hidden"
>
<div class="p-4 pb-3 ytp-border-bottom-soft">
<div class="flex items-start justify-between gap-3">
<div class="min-w-0 flex-1">

2
ui/app/pages/conditions.vue
View file

@ -234,7 +234,7 @@
<div v-else-if="filteredItems.length > 0" class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
<div v-for="cond in filteredItems" :key="cond.id" class="min-w-0 w-full max-w-full">
<div class="ytp-card flex h-full min-w-0 w-full max-w-full flex-col">
<div class="ytp-card flex h-full min-w-0 w-full max-w-full flex-col overflow-hidden">
<div class="p-4 pb-3 ytp-border-bottom-soft">
<div class="flex min-w-0 items-start justify-between gap-3">
<div class="min-w-0 flex-1">

2
ui/app/pages/dl_fields.vue
View file

@ -233,7 +233,7 @@
<div v-else-if="filteredItems.length > 0" class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
<div v-for="field in filteredItems" :key="field.id" class="min-w-0 w-full max-w-full">
<div class="ytp-card flex h-full min-w-0 w-full max-w-full flex-col">
<div class="ytp-card flex h-full min-w-0 w-full max-w-full flex-col overflow-hidden">
<div class="p-4 pb-3 ytp-border-bottom-soft">
<div class="flex min-w-0 items-start justify-between gap-3">
<div class="min-w-0 flex-1">

6
ui/app/pages/docs/[...slug].vue
View file

@ -1,5 +1,5 @@
<template>
<main class="space-y-6">
<main class="w-full min-w-0 max-w-full space-y-6">
<div class="ytp-page-header">
<div class="ytp-page-heading">
<span class="ytp-page-icon">
@ -18,8 +18,8 @@
</div>
</div>
<div class="ytp-card p-0">
<div class="px-4 py-5 sm:px-6 sm:py-6 lg:px-7">
<div class="ytp-card p-0 overflow-hidden">
<div class="min-w-0 max-w-full px-4 py-5 sm:px-6 sm:py-6 lg:px-7">
<Markdown :file="`/api/docs/${docEntry.file}`" />
</div>
</div>

2
ui/app/pages/notifications.vue
View file

@ -271,7 +271,7 @@
<div v-else-if="filteredTargets.length > 0" class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
<div v-for="item in filteredTargets" :key="item.id" class="min-w-0 w-full max-w-full">
<div class="ytp-card flex h-full min-w-0 w-full max-w-full flex-col">
<div class="ytp-card flex h-full min-w-0 w-full max-w-full flex-col overflow-hidden">
<div class="p-4 pb-3 ytp-border-bottom-soft">
<div class="flex min-w-0 items-start justify-between gap-3">
<div class="min-w-0 flex-1">

2
ui/app/pages/presets.vue
View file

@ -232,7 +232,7 @@
<div v-else-if="filteredPresets.length > 0" class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
<div v-for="item in filteredPresets" :key="item.id" class="min-w-0 w-full max-w-full">
<div class="ytp-card flex h-full min-w-0 w-full max-w-full flex-col">
<div class="ytp-card flex h-full min-w-0 w-full max-w-full flex-col overflow-hidden">
<div class="p-4 pb-3 ytp-border-bottom-soft">
<div class="flex min-w-0 items-start justify-between gap-3">
<div class="min-w-0 flex-1">

1292
ui/app/pages/simple.vue
View file

File diff suppressed because it is too large Load diff

2
ui/app/pages/task_definitions.vue
View file

@ -262,7 +262,7 @@
:key="definition.id"
class="min-w-0 w-full max-w-full"
>
<div class="ytp-card flex h-full min-w-0 w-full max-w-full flex-col">
<div class="ytp-card flex h-full min-w-0 w-full max-w-full flex-col overflow-hidden">
<div class="p-4 pb-3 ytp-border-bottom-soft">
<div class="flex min-w-0 items-start justify-between gap-3">
<div class="min-w-0 flex-1">

2
ui/app/pages/tasks.vue
View file

@ -335,7 +335,7 @@
class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3"
>
<div v-for="item in filteredTasks" :key="item.id" class="min-w-0 w-full max-w-full">
<div class="ytp-card flex h-full min-w-0 w-full max-w-full flex-col">
<div class="ytp-card flex h-full min-w-0 w-full max-w-full flex-col overflow-hidden">
<div class="p-4 pb-3 ytp-border-bottom-soft">
<div class="flex min-w-0 items-start justify-between gap-3">
<div class="min-w-0 flex-1 space-y-2">