[release-2.14] fix: layout height triggers page background color not fully filling scroll area (#5775)

halo-dev-bot · AeroWang · web-flow · commit 7e829a5aa009 · 2024-04-23T14:42:27.000+08:00
Co-authored-by: aero &lt;44799877+AeroWang@users.noreply.github.com&gt;
diff --git a/ui/console-src/layouts/BasicLayout.vue b/ui/console-src/layouts/BasicLayout.vue
@@ -112,7 +112,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="flex h-full">
+  <div class="flex min-h-screen">
     <aside
       class="navbar fixed hidden h-full overflow-y-auto md:flex md:flex-col"
     >
diff --git a/ui/src/components/base-app/BaseApp.vue b/ui/src/components/base-app/BaseApp.vue
@@ -100,7 +100,7 @@ body {
 html,
 body,
 #app {
-  height: 100%;
+  min-height: 100vh;
 }
 
 *,
diff --git a/ui/uc-src/layouts/BasicLayout.vue b/ui/uc-src/layouts/BasicLayout.vue
@@ -108,7 +108,7 @@ const disallowAccessConsole = computed(() => {
 </script>
 
 <template>
-  <div class="flex h-full">
+  <div class="flex min-h-screen">
     <aside
       class="navbar fixed hidden h-full overflow-y-auto md:flex md:flex-col"
     >

Original file line number	Diff line number	Diff line change
`@@ -112,7 +112,7 @@ onMounted(() => {`
`112`	`112`	`</script>`
`113`	`113`
`114`	`114`	`<template>`
`115`		`- <div class="flex h-full">`
	`115`	`+ <div class="flex min-h-screen">`
`116`	`116`	`<aside`
`117`	`117`	`class="navbar fixed hidden h-full overflow-y-auto md:flex md:flex-col"`
`118`	`118`	`>`
Original file line number	Diff line number	Diff line change
`@@ -108,7 +108,7 @@ const disallowAccessConsole = computed(() => {`
`108`	`108`	`</script>`
`109`	`109`
`110`	`110`	`<template>`
`111`		`- <div class="flex h-full">`
	`111`	`+ <div class="flex min-h-screen">`
`112`	`112`	`<aside`
`113`	`113`	`class="navbar fixed hidden h-full overflow-y-auto md:flex md:flex-col"`
`114`	`114`	`>`