From a7c152d8afb93ca8e5811f8d13a0fbb292a2c0d6 Mon Sep 17 00:00:00 2001
From: Dmitriy E <dsanichweb@gmail.com>
Date: Fri, 6 Feb 2026 17:59:23 +0300
Subject: [PATCH 1/3] fix: send/receive buttons not visible on iPhone PWA

---
 src/Containers/Footer/Footer.scss       |  6 +-
 src/Pages/Home/index.tsx                | 76 +++++++++++++------------
 src/Pages/Home/styles/index.module.scss | 33 +++++------
 src/theme/variables.css                 | 13 +++++
 4 files changed, 72 insertions(+), 56 deletions(-)

diff --git a/src/Containers/Footer/Footer.scss b/src/Containers/Footer/Footer.scss
index e5bb8792..5b1a98ab 100644
--- a/src/Containers/Footer/Footer.scss
+++ b/src/Containers/Footer/Footer.scss
@@ -6,8 +6,12 @@
   left: 0;
   bottom: 0;
   width: 100%;
-  height: 60px;
+  height: calc(60px + env(safe-area-inset-bottom, 0px));
+  height: calc(60px + constant(safe-area-inset-bottom, 0px));
   text-align: center;
+  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
+  padding-bottom: constant(safe-area-inset-bottom, 0px) !important;
+  box-sizing: border-box;
 
   &_IMG_QR svg {
     position: absolute;
diff --git a/src/Pages/Home/index.tsx b/src/Pages/Home/index.tsx
index 0e10e810..6fb7109c 100644
--- a/src/Pages/Home/index.tsx
+++ b/src/Pages/Home/index.tsx
@@ -176,27 +176,31 @@ const Home = () => {
 
 
 	return (
-		<IonPage className="ion-page-width">
+		<IonPage 
+			className="ion-page-width"
+		>
 			<HomeHeader>
 				<BalanceCard />
 			</HomeHeader>
-			<IonContent scrollY={false}>
-				<IonRefresher slot="fixed" onIonRefresh={handleRefresh}>
-					<IonRefresherContent></IonRefresherContent>
-				</IonRefresher>
-				<Virtuoso
-					style={{ height: "100%" }}
-					data={operations}
-					defaultItemHeight={56}
-					itemContent={(_, op) => (
-
-						<div
-							key={op.operationId}
-							style={{
-								minHeight: 56,
-								padding: "0 1rem"
-							}}
-						>
+		<IonContent 
+			scrollY={false}
+		>
+			<IonRefresher slot="fixed" onIonRefresh={handleRefresh}>
+				<IonRefresherContent></IonRefresherContent>
+			</IonRefresher>
+			<Virtuoso
+				style={{ height: "100%" }}
+				data={operations}
+				defaultItemHeight={56}
+				itemContent={(_, op) => (
+
+					<div
+						key={op.operationId}
+						style={{
+							minHeight: 56,
+							padding: "0 1rem"
+						}}
+					>
 							<HistoryItem
 								operation={op}
 								handleSelectOperation={handleSelectOperation}
@@ -204,26 +208,26 @@ const Home = () => {
 						</div>
 					)}
 				/>
-			</IonContent>
-			<IonFooter className={`ion-no-border ${styles["footer"]}`}>
-				<div className={styles["toolbar"]}>
-					<div className={styles["button-container"]}>
-						<IonButton color="light" className={`${styles["toolbar-button"]} ${styles["toolbar-button-left"]}`} expand="full" routerLink="/receive" routerDirection="forward">
-							<IonIcon slot="start" icon={downloadOutline} ></IonIcon>
-							Receive
-						</IonButton>
-					</div>
-					<div className={styles["button-container"]}>
-						<IonButton color="light" className={`${styles["toolbar-button"]} ${styles["toolbar-button-right"]}`} expand="full" routerLink="/send" routerDirection="forward">
-							<IonIcon slot="start" icon={paperPlaneOutline} ></IonIcon>
-							Send
-						</IonButton>
-					</div>
-					<IonButton color="primary" shape="round" className={styles["fab-button"]} onClick={openScan}>
-						<IonIcon slot="icon-only" icon={qrCodeOutline} />
+		</IonContent>
+		<IonFooter className={`ion-no-border ${styles["footer"]}`}>
+			<div className={styles["toolbar"]}>
+				<div className={styles["button-container"]}>
+					<IonButton color="light" className={`${styles["toolbar-button"]} ${styles["toolbar-button-left"]}`} expand="full" routerLink="/receive" routerDirection="forward">
+						<IonIcon slot="start" icon={downloadOutline} ></IonIcon>
+						Receive
 					</IonButton>
 				</div>
-			</IonFooter>
+				<div className={styles["button-container"]}>
+					<IonButton color="light" className={`${styles["toolbar-button"]} ${styles["toolbar-button-right"]}`} expand="full" routerLink="/send" routerDirection="forward">
+						<IonIcon slot="start" icon={paperPlaneOutline} ></IonIcon>
+						Send
+					</IonButton>
+				</div>
+				<IonButton color="primary" shape="round" className={styles["fab-button"]} onClick={openScan}>
+					<IonIcon slot="icon-only" icon={qrCodeOutline} />
+				</IonButton>
+			</div>
+		</IonFooter>
 			{
 				loadOperationModal &&
 				<Suspense fallback={null}>
diff --git a/src/Pages/Home/styles/index.module.scss b/src/Pages/Home/styles/index.module.scss
index a1a299d1..4426284d 100644
--- a/src/Pages/Home/styles/index.module.scss
+++ b/src/Pages/Home/styles/index.module.scss
@@ -1,59 +1,56 @@
 .footer {
-
-
-
-
+	padding-bottom: env(safe-area-inset-bottom, 0px);
+	padding-bottom: constant(safe-area-inset-bottom, 0px);
+	
+	position: relative;
+	z-index: 100;
+	
 	.toolbar {
 		display: flex !important;
 		position: relative;
-
+		
+		// Additional bottom padding for toolbar itself
+		padding-bottom: env(safe-area-inset-bottom, 0px);
+		padding-bottom: constant(safe-area-inset-bottom, 0px);
+		
+		// Minimum height with safe area consideration
+		min-height: 56px;
 
 		.button-container:first-of-type {
 			border-right: 1px solid var(--ion-color-primary);
 		}
 
-
-
 		.button-container {
 			flex: 1;
 
-
 			ion-button.toolbar-button {
 				flex: 1;
 				margin: 0;
 
-
-
 				&::part(native) {
 					box-shadow: none;
 					height: 56px;
 					border-top: 2px solid var(--ion-color-primary);
 					margin: 0px;
-
 				}
 
 				&.toolbar-button-left {
 					&::part(native) {
 						border-left: 2px solid var(--ion-color-primary);
-
-
 					}
 				}
 
 				&.toolbar-button-right {
 					&::part(native) {
 						border-right: 2px solid var(--ion-color-primary);
-
 					}
 				}
-
 			}
 		}
 
-
 		.fab-button {
 			margin: 0;
-			z-index: 999999;
+			z-index: 10;
 			position: absolute;
 			height: 50px;
 			width: 50px;
@@ -61,7 +58,5 @@
 			left: 50%;
 			top: -25px;
 		}
-
-
 	}
 }
diff --git a/src/theme/variables.css b/src/theme/variables.css
index 17f5bc62..be237dd8 100644
--- a/src/theme/variables.css
+++ b/src/theme/variables.css
@@ -843,3 +843,16 @@ ion-popover.custom-dropdown-popover {
 .ion-content-no-footer::part(scroll) {
 	padding-bottom: var(--ion-safe-area-bottom, 0);
 }
+
+ion-footer {
+	padding-bottom: env(safe-area-inset-bottom, 0px);
+	padding-bottom: constant(safe-area-inset-bottom, 0px);
+	
+	position: relative;
+	z-index: 100;
+}
+
+ion-footer ion-toolbar {
+	padding-bottom: env(safe-area-inset-bottom, 0px);
+	padding-bottom: constant(safe-area-inset-bottom, 0px);
+}

From 8c8afbb45c9d8d9edb8bfbaad968beae8cea5665 Mon Sep 17 00:00:00 2001
From: Dmitriy E <dsanichweb@gmail.com>
Date: Mon, 9 Feb 2026 11:46:09 +0300
Subject: [PATCH 2/3] fix: use Ionic CSS variables for safe area padding

---
 src/Pages/Home/styles/index.module.scss | 14 +-------------
 src/theme/variables.css                 | 11 +----------
 2 files changed, 2 insertions(+), 23 deletions(-)

diff --git a/src/Pages/Home/styles/index.module.scss b/src/Pages/Home/styles/index.module.scss
index 4426284d..296bb9de 100644
--- a/src/Pages/Home/styles/index.module.scss
+++ b/src/Pages/Home/styles/index.module.scss
@@ -1,20 +1,8 @@
 .footer {
-	padding-bottom: env(safe-area-inset-bottom, 0px);
-	padding-bottom: constant(safe-area-inset-bottom, 0px);
-	
-	position: relative;
-	z-index: 100;
-	
 	.toolbar {
 		display: flex !important;
 		position: relative;
-		
-		// Additional bottom padding for toolbar itself
-		padding-bottom: env(safe-area-inset-bottom, 0px);
-		padding-bottom: constant(safe-area-inset-bottom, 0px);
-		
-		// Minimum height with safe area consideration
-		min-height: 56px;
+		padding-bottom: var(--ion-safe-area-bottom, 0px);
 
 		.button-container:first-of-type {
 			border-right: 1px solid var(--ion-color-primary);
diff --git a/src/theme/variables.css b/src/theme/variables.css
index be237dd8..47c1446a 100644
--- a/src/theme/variables.css
+++ b/src/theme/variables.css
@@ -845,14 +845,5 @@ ion-popover.custom-dropdown-popover {
 }
 
 ion-footer {
-	padding-bottom: env(safe-area-inset-bottom, 0px);
-	padding-bottom: constant(safe-area-inset-bottom, 0px);
-	
-	position: relative;
-	z-index: 100;
-}
-
-ion-footer ion-toolbar {
-	padding-bottom: env(safe-area-inset-bottom, 0px);
-	padding-bottom: constant(safe-area-inset-bottom, 0px);
+	padding-bottom: var(--ion-safe-area-bottom, 0px);
 }

From b321dc7c017f74b6d1ea6ba5e0da6c2b0cd0ef78 Mon Sep 17 00:00:00 2001
From: Dima | Dmitry Ermolenko <dsanichweb@gmail.com>
Date: Tue, 17 Feb 2026 15:36:21 +0300
Subject: [PATCH 3/3] fix: small rollback

---
 src/Containers/Footer/Footer.scss | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/Containers/Footer/Footer.scss b/src/Containers/Footer/Footer.scss
index 5b1a98ab..ae453b27 100644
--- a/src/Containers/Footer/Footer.scss
+++ b/src/Containers/Footer/Footer.scss
@@ -6,12 +6,8 @@
   left: 0;
   bottom: 0;
   width: 100%;
-  height: calc(60px + env(safe-area-inset-bottom, 0px));
-  height: calc(60px + constant(safe-area-inset-bottom, 0px));
+  height: 60px;
   text-align: center;
-  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
-  padding-bottom: constant(safe-area-inset-bottom, 0px) !important;
-  box-sizing: border-box;
 
   &_IMG_QR svg {
     position: absolute;
@@ -108,4 +104,4 @@
     width: 50%;
     height: 100%;
   }
-}
\ No newline at end of file
+}