Add ingredients in the side of instructions. Quite messy...

Dockerfile.combined

@@ -1,50 +0,0 @@
-# Multi-stage build combining both services
-
-# Stage 1: Build the Node.js/Astro application
-FROM node:24-alpine AS app-builder
-WORKDIR /app
-COPY package*.json ./
-RUN npm i
-COPY . .
-ENV PUBLIC_PB_URL=http://localhost:8080
-ENV PUBLIC_URL=http://localhost:4321
-RUN npm run build
-
-ARG PB_VERSION=0.29.2
-
-WORKDIR /pb
-
-RUN apk add --no-cache \
-    unzip \
-    curl \
-    ca-certificates \
-    bash \
-    nodejs \
-    npm
-
-# Download and unzip PocketBase
-ADD https://github.com/pocketbase/pocketbase/releases/download/v${PB_VERSION}/pocketbase_${PB_VERSION}_linux_amd64.zip /tmp/pb.zip
-RUN unzip /tmp/pb.zip -d /pb/
-
-# Copy PocketBase entrypoint
-COPY api/docker-entrypoint.sh /usr/local/bin/
-RUN chmod +x /usr/local/bin/docker-entrypoint.sh
-
-# # Set environment variables (keeping them as they are)
-# ENV PUBLIC_PB_URL=http://pb:8080
-# ENV PUBLIC_URL=http://localhost:4321
-
-VOLUME [ "/pb/pb_data", "/pb/pb_migrations", "/pb/pb_hooks" ]
-# VOLUME [ "/pb/pb_data" ]
-
-EXPOSE 8080 4321
-
-# Create a startup script that runs both services
-RUN echo '#!/bin/bash' > /usr/local/bin/start-services.sh && \
-    echo 'cd /pb && docker-entrypoint.sh serve --http=0.0.0.0:8080 &' >> /usr/local/bin/start-services.sh && \
-    echo 'cd /app && npm run preview -- --host &' >> /usr/local/bin/start-services.sh && \
-    echo 'wait' >> /usr/local/bin/start-services.sh && \
-    chmod +x /usr/local/bin/start-services.sh
-
-ENTRYPOINT ["start-services.sh"]
-

docker-compose.yml

@@ -1,30 +1,16 @@
-# services:
-#   web:
-#     build: .
-#     env_file: .env
-#     ports:
-#       - "4321:4321"
-
-#   pb:
-#     build: api
-#     env_file: .env
-#     volumes:
-#       - ./api/pb_data:/pb/pb_data
-#       - ./api/pb_migrations:/pb/pb_migrations
-#       - ./api/pb_hooks:/pb/pb_hooks
-#     ports:
-#       - "8080:8080"
-
 services:
-  recipie:
+  web:
-    build: 
+    build: .
-      context: .
-      dockerfile: Dockerfile.combined
     env_file: .env
     ports:
       - "4321:4321"
-      - "8080:8080" # optional, for manual pocketbase access
+
+  pb:
+    build: api
+    env_file: .env
     volumes:
       - ./api/pb_data:/pb/pb_data
       - ./api/pb_migrations:/pb/pb_migrations
       - ./api/pb_hooks:/pb/pb_hooks
+    ports:
+      - "8080:8080"

src/components/Detail/IngredientTableView.astro

@@ -2,29 +2,28 @@
 // const { ingredients } = Astro.props
 
 const { class: className, ingredients } = Astro.props
-const tableView = true
 ---
 
-{!tableView && (
+<!-- <div class=`bg-[#2a2b2c] rounded-lg grid grid-cols-3 text-center ${className}`>
-    <div class={`bg-[#2a2b2c] p-3 rounded-lg w-full text-left ${className}`}>
+    <span class="font-bold">Quantity</span>
+    <span class="font-bold">Unit</span>
+    <span class="font-bold">Food</span>
     {
         ingredients.map(ing => (
-            <div class="text-white/70">
+            <span>{ing.quantity}</span>
-                <p>• {ing.quantity}&nbsp;{ing.unit}&nbsp;{ing.name}</p>
+            <span>{ing.unit}</span>
-            </div>
+            <span>{ing.name}</span>
         ))
     }
 
-    </div>
+</div> -->
-)}
 
-{tableView && (
+<table class={`table-auto text-left bg-[#2a2b2c] rounded-lg ${className} w-full`}>
-    <table class={`table-auto text-left bg-[#2a2b2c] rounded-lg ${className} w-full`}>
     <thead>
         <tr>
             <th class="px-4 py-2">Quantity</th>
             <th class="px-4 py-2">Unit</th>
-                <th class="px-4 py-2">Ingredient</th>
+            <th class="px-4 py-2">Food</th>
         </tr>
     </thead>
     <tbody>
@@ -40,5 +39,4 @@ const tableView = true
         ))
         }
     </tbody>
-    </table>
+</table>
-)}