fix checkbox align

a-type · Jan 23, 2025 · a04f9cf · a04f9cf
1 parent 02bdaca
commit a04f9cf
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git a/apps/gnocchi/web/src/components/recipes/editor/EmbeddedSubRecipeInstructons.tsx b/apps/gnocchi/web/src/components/recipes/editor/EmbeddedSubRecipeInstructons.tsx
@@ -1,5 +1,5 @@
 import { hooks } from '@/stores/groceries/index.js';
-import { Box, Button, Collapsible, Icon } from '@a-type/ui';
+import { Box, Button, clsx, Collapsible, Icon } from '@a-type/ui';
 import { ReactNode, Suspense } from 'react';
 import { RecipeInstructionsViewer } from '../viewer/RecipeInstructionsViewer.jsx';
 
@@ -19,8 +19,10 @@ export function EmbeddedSubRecipeInstructionsWrapper({
 
 export function EmbeddedSubRecipeInstructionsToggle({
 	recipeId,
+	className,
 }: {
 	recipeId: string;
+	className?: string;
 }) {
 	const recipe = hooks.useRecipe(recipeId);
 	hooks.useWatch(recipe);
@@ -33,7 +35,7 @@ export function EmbeddedSubRecipeInstructionsToggle({
 		<Collapsible.Trigger asChild>
 			<Button
 				color="ghost"
-				className="w-full gap-2 items-center text-start"
+				className={clsx('w-full gap-2 items-center text-start', className)}
 				size="small"
 				contentEditable={false}
 			>

diff --git a/apps/gnocchi/web/src/components/recipes/editor/InstructionStepNodeView.tsx b/apps/gnocchi/web/src/components/recipes/editor/InstructionStepNodeView.tsx
@@ -163,21 +163,24 @@ export function InstructionStepNodeView({
 				className={classNames(
 					'grid grid-areas-[label_label_label]-[tools_content_endTools]-[note_note_note]-[embed_embed_embed]',
 					'grid-cols-[min-content_1fr_min-content] grid-rows-[repeat(3,min-content)]',
-					'mb-4 rounded-md w-full transition-colors',
+					'mb-2 rounded-md w-full transition-colors items-start',
 					completed && !isEditing && 'opacity-60',
 					isAssignedToMe && !isEditing && 'bg-primaryWash mb-2',
 				)}
 			>
 				<div
 					className={clsx(
-						'[grid-area:content] relative flex flex-row gap-2 items-start justify-between',
+						'[grid-area:content] relative flex flex-row gap-2 items-start pt-2 justify-between',
 						!subRecipeId && 'items-center',
 					)}
 				>
 					{subRecipeId ? (
 						<InstructionsContext value={embeddedCtx}>
 							<Suspense fallback={<div>Loading sub-recipe</div>}>
-								<EmbeddedSubRecipeInstructionsToggle recipeId={subRecipeId} />
+								<EmbeddedSubRecipeInstructionsToggle
+									recipeId={subRecipeId}
+									className="mt--1"
+								/>
 							</Suspense>
 							{isEditing && (
 								<Button size="icon" color="ghost" onClick={removeSubRecipe}>
@@ -203,7 +206,7 @@ export function InstructionStepNodeView({
 				</div>
 				<CollapsibleRoot
 					open={showNote}
-					className="[grid-area:note] mt-2 ml-auto"
+					className="[grid-area:note] mt-2 ml-auto w-max-content max-w-400px"
 					contentEditable={false}
 				>
 					<CollapsibleContent>
@@ -253,7 +256,7 @@ export function InstructionStepNodeView({
 					</div>
 				)}
 				<div
-					className="flex flex-col items-center gap-2 [grid-area:endTools] w-32px ml-3"
+					className="flex flex-col items-center gap-1 [grid-area:endTools] w-32px ml-3"
 					contentEditable={false}
 				>
 					{!isEditing && isSubscribed && (