Fix commit dialog banner layout

This commit is contained in:
Gregory Schier
2026-07-04 15:13:34 -07:00
parent eb2a2dd775
commit c833aeba78
2 changed files with 7 additions and 4 deletions
@@ -10,7 +10,6 @@ import { DismissibleBanner } from "./core/DismissibleBanner";
const COMMERCIAL_USE_SNOOZE_MS = 7 * 24 * 60 * 60 * 1000; const COMMERCIAL_USE_SNOOZE_MS = 7 * 24 * 60 * 60 * 1000;
const COMMERCIAL_USE_BANNER_MESSAGE = const COMMERCIAL_USE_BANNER_MESSAGE =
"Personal use of Yaak is free. If youre using Yaak at work, please purchase a license."; "Personal use of Yaak is free. If youre using Yaak at work, please purchase a license.";
const hiddenBanner = <span aria-hidden className="block h-0 w-0 shrink-0 overflow-hidden" />;
export function CommercialUseBanner({ export function CommercialUseBanner({
source, source,
@@ -56,7 +55,7 @@ export function CommercialUseBanner({
}, [setSnoozedAt, snoozed, source]); }, [setSnoozedAt, snoozed, source]);
if (!visible || isSnoozeLoading || (snoozed && !snoozeStartedRef.current)) { if (!visible || isSnoozeLoading || (snoozed && !snoozeStartedRef.current)) {
return hiddenBanner; return null;
} }
return ( return (
@@ -206,9 +206,10 @@ export function GitCommitDialog({ syncDir, onDone, workspace }: Props) {
layout="horizontal" layout="horizontal"
defaultRatio={0.6} defaultRatio={0.6}
firstSlot={({ style }) => ( firstSlot={({ style }) => (
<div style={style} className="h-full px-4 grid grid-rows-[auto_minmax(0,1fr)] gap-3"> <div style={style} className="h-full px-4 flex flex-col gap-3">
<CommercialUseBanner source="git-commit" title="Using Git for work?" /> <CommercialUseBanner source="git-commit" title="Using Git for work?" />
<SplitLayout <SplitLayout
className="min-h-0 flex-1"
storageKey="commit-vertical" storageKey="commit-vertical"
layout="vertical" layout="vertical"
defaultRatio={0.35} defaultRatio={0.35}
@@ -239,7 +240,10 @@ export function GitCommitDialog({ syncDir, onDone, workspace }: Props) {
</div> </div>
)} )}
secondSlot={({ style: innerStyle }) => ( secondSlot={({ style: innerStyle }) => (
<div style={innerStyle} className="grid grid-rows-[minmax(0,1fr)_auto] gap-3 pb-2"> <div
style={innerStyle}
className="grid grid-rows-[minmax(0,1fr)_auto] gap-3 pb-2"
>
<Input <Input
className="text-base! font-sans rounded-md" className="text-base! font-sans rounded-md"
placeholder="Commit message..." placeholder="Commit message..."