Create Controller ui tweaks (#1232)

* Create Controller ui tweaks

* Update snapshots

.github/workflows/docker.yml

@@ -25,6 +25,10 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
+      - uses: docker/setup-qemu-action@v3
+
+      - uses: docker/setup-buildx-action@v3
+
       - uses: docker/login-action@v3
         with:
           registry: ${{ env.REGISTRY }}
@@ -36,7 +40,7 @@ jobs:
         with:
           images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
           tags: |
-            type=sha,format=long
+            type=sha,format=short
             type=ref,event=branch
             type=ref,event=pr
             type=raw,value=latest,enable={{is_default_branch}}
@@ -48,3 +52,4 @@ jobs:
           push: ${{ github.event_name != 'pull_request' }}
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
+          platforms: linux/amd64,linux/arm64

Dockerfile.storybook

@@ -29,5 +29,13 @@ RUN Xvfb :99 -screen 0 1280x1024x24 2>/dev/null &
 
 WORKDIR /app
 
+# Copy package files for installation
+COPY package.json pnpm-lock.yaml ./
+COPY packages/keychain/package.json ./packages/keychain/
+COPY packages/ui-next/package.json ./packages/ui-next/
+
+# Install dependencies
+RUN pnpm install --frozen-lockfile
+
 # Default command that can be overridden
 CMD ["bash"]

packages/keychain/src/components/connect/create/CreateController.tsx

@@ -74,13 +74,15 @@ export function CreateControllerView({
               isLoading={validation.status === "validating"}
               disabled={isLoading}
               onClear={onUsernameClear}
+              style={{ position: "relative", zIndex: 1 }}
             />
           </Box>
 
           <StatusTray
             username={usernameField.value}
             validation={validation}
             error={error}
+            style={{ position: "relative", zIndex: 0 }}
           />
         </Content>
 

packages/keychain/src/components/connect/create/StatusTray.tsx

@@ -4,15 +4,19 @@ import { ExternalIcon } from "@cartridge/ui-next";
 import { useMemo } from "react";
 import { Link } from "react-router-dom";
 
+interface StatusTrayProps {
+  username: string;
+  validation: ValidationState;
+  error?: Error;
+  style?: React.CSSProperties;
+}
+
 export function StatusTray({
   username,
   validation,
   error,
-}: {
-  username: string;
-  validation: ValidationState;
-  error?: Error;
-}) {
+  style,
+}: StatusTrayProps) {
   const isError = validation.status === "invalid" || error;
   const isTimeoutError = error?.message?.includes(
     "The operation either timed out or was not allowed",
@@ -34,11 +38,12 @@ export function StatusTray({
       alignItems="flex-start"
       bg="solid.secondary"
       py="8px"
-      marginTop="-1rem"
-      paddingTop="15px"
+      marginTop="-11px"
+      paddingTop="12px"
       backgroundColor={isError ? "red.500" : "solid.secondary"}
       borderBottomRadius="4px"
       divider={<Divider borderColor="darkGray.800" opacity="0.1" />}
+      style={style}
     >
       <Text
         fontFamily="Inter"

packages/ui-next/src/components/primitives/input.tsx

@@ -17,7 +17,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         <input
           type={type}
           className={cn(
-            "flex h-10 w-full rounded-md border border-input bg-quaternary px-4 py-3.5 text-md ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+            "flex h-10 w-full rounded-md border border-input bg-quaternary px-4 py-3.5 text-md ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
             className,
           )}
           ref={ref}

scripts/update-storybook-snapshot.sh

@@ -5,8 +5,8 @@ docker run \
   --rm \
   -v "$(pwd)":/app \
   -v /app/node_modules \
-  -it \
-  ghcr.io/cartridge-gg/controller/storybook-env:sha-b6d96629787539de6f5e464aafedafd4eb3ffcc7 \
+  --ipc=host \
+  storybook-env \
   bash -c "
     pnpm install --frozen-lockfile && \
     pnpm test:storybook:update