Rubicon/tutu
1
0
Fork 0
Code Issues 18 Pull requests 1 Projects 1 Activity Actions

Timelines: respect the notch

Browse source
This commit is contained in:
thislight 2024-07-24 14:27:20 +08:00
parent 067a363550
commit f0a614d4f0
6 changed files with 17 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/timelines/Home.tsx
View file

@ -122,7 +122,7 @@ const TimelinePanel: Component<{
<div
style={{
display: "flex",
padding: "20px 0",
padding: "20px 0 var(--safe-area-inset-bottom, 20px)",
"align-items": "center",
"justify-content": "center",
}}
@ -136,7 +136,7 @@ const TimelinePanel: Component<{
<div
style={{
display: "flex",
padding: "20px 0",
padding: "20px 0 var(--safe-area-inset-bottom, 20px)",
"align-items": "center",
"justify-content": "center",
}}
@ -239,8 +239,6 @@ const Home: ParentComponent = (props) => {
max-width: 560px;
height: 100%;
padding: 40px 16px;
max-height: calc(100vh - var(--scaffold-topbar-height, 0px));
max-height: calc(100dvh - var(--scaffold-topbar-height, 0px));
scroll-snap-align: center;
@media (max-width: 600px) {
@ -257,6 +255,8 @@ const Home: ParentComponent = (props) => {
scroll-snap-stop: always;
height: calc(100vh - var(--scaffold-topbar-height, 0px));
height: calc(100dvh - var(--scaffold-topbar-height, 0px));
padding-left: var(--safe-area-inset-left, 0);
padding-right: var(--safe-area-inset-right, 0);
@media (max-width: 600px) {
grid-auto-columns: 100%;
@ -269,7 +269,7 @@ const Home: ParentComponent = (props) => {
<Scaffold
topbar={
<AppBar position="static">
<Toolbar variant="dense" class="responsive">
<Toolbar variant="dense" class="responsive" sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}>
<Tabs onFocusChanged={setCurrentFocusOn} offset={panelOffset()}>
<Tab focus={isTabFocus(0)} onClick={[onTabClick, 0]}>
Home