this repo has no description
Try use smaller dimension for fine pointers
+13
-5
+1
-1
src/app.css
+1
-1
src/app.css
+4
-4
src/components/status.css
+4
-4
src/components/status.css
···
908
908
grid-auto-rows: 1fr;
909
909
gap: 2px;
910
910
/* height: 160px; */
911
-
min-height: 88px;
911
+
min-height: var(--pointer-min-dimension);
912
912
height: auto;
913
913
max-height: max(160px, 33vh);
914
914
}
···
1037
1037
.status .media-container.media-eq1 .media {
1038
1038
display: inline-block;
1039
1039
max-width: 100% !important;
1040
-
min-width: 88px;
1040
+
min-width: var(--pointer-min-dimension);
1041
1041
/* width: auto; */
1042
-
min-height: 88px;
1042
+
min-height: var(--pointer-min-dimension);
1043
1043
/* --maxAspectHeight: max(160px, 33vh);
1044
1044
--aspectWidth: calc(--width / --height * var(--maxAspectHeight)); */
1045
1045
width: min(var(--aspectWidth), var(--width), 100%);
···
1300
1300
:is(.status, .media-post) .media-audio {
1301
1301
width: 100%;
1302
1302
height: 100%;
1303
-
min-height: 88px;
1303
+
min-height: var(--pointer-min-dimension);
1304
1304
background-image: radial-gradient(
1305
1305
circle at center center,
1306
1306
transparent,
+8
src/index.css
+8
src/index.css
···
96
96
97
97
--timing-function: cubic-bezier(0.3, 0.5, 0, 1);
98
98
--spring-timing-funtion: cubic-bezier(0.175, 0.885, 0.32, 1.275);
99
+
100
+
--pointer-min-dimension: 88px;
101
+
}
102
+
103
+
@media (pointer: fine) {
104
+
:root {
105
+
--pointer-min-dimension: 44px;
106
+
}
99
107
}
100
108
101
109
@media (min-resolution: 2dppx) {