a tool for shared writing and social publishing
added some fallbacks for --webkit-fill-available which will be funky of firefox
+17
-8
+14
app/globals.css
+14
app/globals.css
···
66
66
--font-serif: Garamond;
67
67
}
68
68
69
+
@utility w-fill {
70
+
width: -webkit-fill-available;
71
+
width: -moz-available;
72
+
width: stretch;
73
+
}
74
+
75
+
@utility h-fill {
76
+
height: -webkit-fill-available;
77
+
height: -moz-available;
78
+
height: stretch;
79
+
}
80
+
69
81
/*
70
82
The default border color has changed to `currentcolor` in Tailwind CSS v4,
71
83
so we've added these compatibility styles to make sure everything still
···
151
163
@apply p-0;
152
164
@apply overscroll-y-none;
153
165
min-height: -webkit-fill-available;
166
+
min-height: stretch;
167
+
min-height: -moz-available;
154
168
@apply font-sans;
155
169
font-synthesis: none;
156
170
}
+1
-2
components/ActionBar/ActionButton.tsx
+1
-2
components/ActionBar/ActionButton.tsx
···
77
77
{icon}
78
78
</div>
79
79
<div
80
-
className={`flex flex-col ${subtext && "leading-snug"} sm:max-w-full min-w-0 mr-1 ${sidebar.open ? "block" : labelOnMobile ? "sm:hidden block" : "hidden"}`}
81
-
style={{ width: "-webkit-fill-available" }}
80
+
className={`w-fill flex flex-col ${subtext && "leading-snug"} sm:max-w-full min-w-0 mr-1 ${sidebar.open ? "block" : labelOnMobile ? "sm:hidden block" : "hidden"}`}
82
81
>
83
82
<div className="truncate text-left">{label}</div>
84
83
{subtext && (
+1
-5
components/ActionBar/Sidebar.tsx
+1
-5
components/ActionBar/Sidebar.tsx
···
39
39
}}
40
40
>
41
41
<div
42
-
style={
43
-
props.alwaysOpen
44
-
? { height: "-webkit-fill-available" }
45
-
: { height: "fit-content" }
46
-
}
47
42
className={`
48
43
actionSidebar
44
+
${props.alwaysOpen ? "h-fill" : "h-fit"}
49
45
${
50
46
!props.alwaysOpen
51
47
? ` w-max hover:w-48 absolute top-0 left-0 z-10 opaque-container`