Skip to content

fix: remove iOS-specific mobile styling #252

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
AdamJ wants to merge 1 commit into
base: main
Choose a base branch
from
+1 −85
Open

fix: remove iOS-specific mobile styling #252

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 0 additions & 4 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,6 @@
/>
<meta name="theme-color" content="#3b82f6" />

<!-- iOS Specific Meta Tags -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

<!-- Microsoft Specific Meta Tags -->
<meta name="msapplication-TileColor" content="#3b82f6" />
<meta name="msapplication-TileImage" content="/icons/icon-144x144.png" />
Expand Down
80 changes: 0 additions & 80 deletions public/pwa.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,14 +87,6 @@ body {
overscroll-behavior-y: contain;
}

/* Restore native rubber-band bounce on iOS — body is fixed/overflow:hidden there
so this applies to #root (the actual scroll container). */
@supports (-webkit-touch-callout: none) {
#root {
overscroll-behavior-y: auto;
}
}

/* Improve button touch targets on mobile */
@media (max-width: 768px) {
button:not([aria-hidden='true']) {
Expand Down Expand Up @@ -163,84 +155,12 @@ body {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Ensure focused inputs scroll into view above the keyboard with enough clearance */
@supports (-webkit-touch-callout: none) {
input:focus,
textarea:focus,
select:focus {
scroll-margin-bottom: 24px;
}
}

/* iOS specific fixes */
@supports (-webkit-touch-callout: none) {
/* Fix iOS safari bounce */
body {
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
}

#root {
overflow-y: auto;
height: 100%;
-webkit-overflow-scrolling: touch;
}

/* Fix iOS input zoom */
input[type='text'],
input[type='email'],
input[type='password'],
input[type='number'],
select,
textarea {
font-size: 16px !important;
}

/* iOS PWA bottom navigation fix */
.mobile-nav-ios {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 9999;
padding-bottom: env(safe-area-inset-bottom);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
background-color: rgba(255, 255, 255, 0.95);
}

/* Dark mode support for iOS navigation */
.dark .mobile-nav-ios {
background-color: rgba(9, 9, 11, 0.95);
}

/* Ensure body padding accounts for nav + safe area */
@media (max-width: 768px) {
body {
padding-bottom: 0 !important;
}

#root {
padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
}
}
}

/* Prevent scroll from leaking through open bottom sheets to the page beneath */
[data-vaul-drawer] {
touch-action: pan-y;
overscroll-behavior: contain;
}

/* Lift the floating action button above the mobile nav + home indicator */
@supports (-webkit-touch-callout: none) {
.fab-nav-offset {
bottom: calc(4rem + env(safe-area-inset-bottom, 0px)) !important;
}
}

/* Page transitions via CSS View Transitions API */
@keyframes slideInFromRight {
from {
Expand Down
2 changes: 1 addition & 1 deletion src/components/NewTaskForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ export const NewTaskForm: React.FC<NewTaskFormProps> = ({ onSubmit, onCancel, de
<Button
variant="default"
onClick={() => setIsOpen(true)}
className="fixed bottom-16 fab-nav-offset md:bottom-6 right-6 w-16 h-16 rounded-full text-white text-md shadow-2xl hover:shadow-3xl transition-all duration-200 flex items-center justify-center z-50 hover:scale-110"
className="fixed bottom-16 md:bottom-6 right-6 w-16 h-16 rounded-full text-white text-md shadow-2xl hover:shadow-3xl transition-all duration-200 flex items-center justify-center z-50 hover:scale-110"
aria-label="New Task"
>
<Plus style={{ fontSize: "1.5rem", width: "1.5rem", height: "1.5rem" }} />
Expand Down
Loading