leaflet.pub
a tool for shared writing and social publishing
fix toolbar padding on desktop
awarm.space
+6
-1
components/Toolbar/index.tsx
+6
-1
components/Toolbar/index.tsx
···
17
17
import { AreYouSure, deleteBlock } from "components/Blocks/DeleteBlock";
18
18
import { TooltipButton } from "components/Buttons";
19
19
import { TextAlignmentToolbar } from "./TextAlignmentToolbar";
20
+
import { useIsMobile } from "src/hooks/isMobile";
20
21
21
22
export type ToolbarTypes =
22
23
| "areYouSure"
···
78
79
setToolbarState("default");
79
80
}
80
81
}, [selectedBlocks.length, toolbarState]);
82
+
let isMobile = useIsMobile();
81
83
82
84
return (
83
85
<Tooltip.Provider>
84
-
<div className="toolbar flex gap-2 items-center justify-between w-full h-[calc(21px+var(--safe-padding-bottom))]">
86
+
<div
87
+
className={`toolbar flex gap-2 items-center justify-between w-full
88
+
${isMobile ? "h-[calc(21px+var(--safe-padding-bottom))]" : "h-[26px]"}`}
89
+
>
85
90
<div className="toolbarOptions flex gap-1 sm:gap-[6px] items-center grow">
86
91
{toolbarState === "default" ? (
87
92
<TextToolbar