admtracksteel/camila
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ajusta layout responsivo no mobile usando dynamic viewport height e margens safe-area

Browse Source
This commit is contained in:
admtracksteel
2026-05-28 17:56:24 +00:00
parent c7dabebe17
commit 627f02ef7a
1 changed files with 17 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/style.css
+17 -3
View File
@@ -70,6 +70,11 @@
padding: 0; padding: 0;
} }
html {
height: 100%;
height: -webkit-fill-available;
}
body { body {
font-family: var(--font-sans); font-family: var(--font-sans);
background-color: var(--bg-primary); background-color: var(--bg-primary);
@@ -78,7 +83,9 @@ body {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
line-height: 1.5; line-height: 1.5;
height: 100vh; height: 100%;
height: -webkit-fill-available;
height: 100dvh;
width: 100%; width: 100%;
} }
@@ -319,7 +326,9 @@ body {
.app-container { .app-container {
display: flex; display: flex;
width: 100%; width: 100%;
height: 100vh; height: 100%;
height: -webkit-fill-available;
height: 100dvh;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
@@ -339,6 +348,7 @@ body {
.sidebar-header { .sidebar-header {
padding: 16px; padding: 16px;
padding-top: calc(16px + env(safe-area-inset-top));
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
@@ -656,6 +666,7 @@ body {
/* Rodapé Sidebar */ /* Rodapé Sidebar */
.sidebar-footer { .sidebar-footer {
padding: 16px; padding: 16px;
padding-bottom: calc(16px + env(safe-area-inset-bottom));
border-top: 1px solid var(--border-light); border-top: 1px solid var(--border-light);
} }
@@ -762,8 +773,10 @@ body {
/* Header */ /* Header */
.chat-header { .chat-header {
height: var(--header-height); height: auto;
min-height: var(--header-height);
padding: 0 16px; padding: 0 16px;
padding-top: env(safe-area-inset-top);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@@ -1151,6 +1164,7 @@ code {
/* Rodapé / Input Area */ /* Rodapé / Input Area */
.chat-footer { .chat-footer {
padding: 16px; padding: 16px;
padding-bottom: calc(16px + env(safe-area-inset-bottom));
background-color: var(--bg-primary); background-color: var(--bg-primary);
} }