adamf/web_server
1
1
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

Fix small-screen layout issues for Home tables and sidebar images
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 1m1s
Details

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Adam French
2026-03-25 02:54:49 +00:00
parent 570a823426
commit 7d74a2fc07
2 changed files with 6 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
nginx/vue/src/components/util/LinkTable.vue
View File

@@ -22,7 +22,7 @@ const show = ref(false);
</script> </script>
<template> <template>
<div v-if="title" class="h-fit w-fit"> <div v-if="title" class="h-fit w-full">
<ToggleHeader v-model="show" class="justify-between flex"> <ToggleHeader v-model="show" class="justify-between flex">
{{ title }} {{ title }}
</ToggleHeader> </ToggleHeader>
@@ -35,7 +35,7 @@ const show = ref(false);
> >
<p class="bdr-2 bg-bg_tertiary">{{ item.name }}</p> <p class="bdr-2 bg-bg_tertiary">{{ item.name }}</p>
</Link> </Link>
<table v-else> <table class="w-full" v-else>
<tbody> <tbody>
<tr v-for="item in items" :key="item.id"> <tr v-for="item in items" :key="item.id">
<th>{{ item.type }}</th> <th>{{ item.type }}</th>
@@ -58,7 +58,7 @@ const show = ref(false);
<p class="bdr-2 bg-bg_tertiary">{{ item.name }}</p> <p class="bdr-2 bg-bg_tertiary">{{ item.name }}</p>
</Link> </Link>
</template> </template>
<table v-else> <table class="w-full" v-else>
<tbody> <tbody>
<tr v-for="item in items" :key="item.id"> <tr v-for="item in items" :key="item.id">
<th>{{ item.type }}</th> <th>{{ item.type }}</th>

3
nginx/vue/src/views/home/Home.vue
View File

@@ -135,11 +135,14 @@ import Consumption from "./Consumption.vue";
.sidebar-image { .sidebar-image {
max-height: 200px; max-height: 200px;
overflow: hidden;
} }
.sidebar-image :deep(img) { .sidebar-image :deep(img) {
max-height: 200px; max-height: 200px;
object-fit: contain; object-fit: contain;
display: block;
margin-inline: auto;
} }
} }