[READ-ONLY] Mirror of https://github.com/improsocial/impro
An extensible Bluesky client for web
impro.social
Update PWA safe inset
Grace Kind
(Jul 17, 2026, 5:54 PM -0500)
4dd88fd6
68122ebf
+33
-26
+1
-1
package.json
+1
-1
package.json
+4
-1
src/_includes/head.html
+4
-1
src/_includes/head.html
···
2
2
<link rel="icon" href="/img/favicon.ico" />
3
3
<link rel="apple-touch-icon" sizes="180x180" href="/img/apple-touch-icon.png" />
4
4
<link rel="manifest" href="/manifest.json" />
5
-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
5
+
<meta
6
+
name="viewport"
7
+
content="width=device-width, initial-scale=1.0, viewport-fit=cover"
8
+
/>
6
9
<title>Impro</title>
7
10
<link rel="stylesheet" href="/css/style.css" />
8
11
<!-- SEO tags -->
+28
-8
src/css/style.css
+28
-8
src/css/style.css
···
253
253
--safe-area-inset-bottom: 1.75em;
254
254
}
255
255
256
+
/* Installed as a PWA (e.g. added to the iOS home screen) */
257
+
@media (display-mode: standalone) {
258
+
html {
259
+
--safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
260
+
}
261
+
}
262
+
256
263
/* Don't show backdrop for modals by default */
257
264
*::backdrop {
258
265
background-color: transparent;
···
1503
1510
1504
1511
.footer-nav {
1505
1512
position: fixed;
1506
-
bottom: var(--safe-area-inset-bottom);
1507
-
height: var(--footer-height);
1513
+
bottom: 0;
1514
+
height: calc(var(--footer-height) + var(--safe-area-inset-bottom));
1515
+
padding-bottom: var(--safe-area-inset-bottom);
1508
1516
width: 100%;
1509
1517
background: var(--background-color);
1510
1518
z-index: var(--footer-z-index);
1511
1519
border-top: var(--hair) solid var(--post-border-color);
1512
-
}
1513
-
1514
-
.footer-nav-safe-area {
1515
-
background: var(--background-color);
1516
-
height: var(--safe-area-inset-bottom);
1517
-
width: 100%;
1518
1520
}
1519
1521
1520
1522
@media (min-width: 800px) {
···
6086
6088
transition: color 0.2s;
6087
6089
border-radius: var(--pill-button-border-radius);
6088
6090
color: var(--highlight-color);
6091
+
}
6092
+
6093
+
.post-composer-drafts-button {
6094
+
background: none;
6095
+
border: none;
6096
+
font-size: 15px;
6097
+
cursor: pointer;
6098
+
padding: 8px 12px;
6099
+
transition: color 0.2s;
6100
+
border-radius: var(--pill-button-border-radius);
6101
+
color: var(--highlight-color);
6102
+
margin-left: auto;
6103
+
margin-right: 8px;
6104
+
}
6105
+
6106
+
.post-composer-drafts-button:disabled {
6107
+
opacity: 0.5;
6108
+
cursor: default;
6089
6109
}
6090
6110
6091
6111
.post-composer-send-button {