one line fixed it :3 but also i don't want to remove the other two cos they're useful

Dockerfile.combined

@@ -0,0 +1,50 @@
+# 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,16 +1,30 @@
+# 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:
-  web:
-    build: .
+  recipie:
+    build: 
+      context: .
+      dockerfile: Dockerfile.combined
     env_file: .env
     ports:
       - "4321:4321"
-
-  pb:
-    build: api
-    env_file: .env
+      - "8080:8080" # optional, for manual pocketbase access
     volumes:
       - ./api/pb_data:/pb/pb_data
       - ./api/pb_migrations:/pb/pb_migrations
-      - ./api/pb_hooks:/pb/pb_hooks
-    ports:
-      - "8080:8080"
+      - ./api/pb_hooks:/pb/pb_hooks

src/components/Header.astro

@@ -7,8 +7,8 @@
     </a>
 
     <div class="ml-auto space-x-5">
-        <a class="hover:underline underline-offset-4 "  href="/recipe/new">new</a>
-        <a class="hover:underline underline-offset-4 " >tags</a>
-        <a class="hover:underline underline-offset-4 " >search</a>
+        <a>new</a>
+        <a>tags</a>
+        <a>search</a>
     </div>
 </div>

src/pages/recipe/[recipeid].astro

@@ -28,7 +28,7 @@ const ingredients = await Promise.all(
 ---
 
 <SiteLayout>
-    <div class="flex flex-col md:flex-row mx-auto justify-center w-full lg:max-w-3/4 xl:max-w-2/3 2xl:max-w-1/2">
+    <div class="flex flex-col md:flex-row">
         <div class="flex flex-col mt-2 md:mt-4 sticky">
             <ImageCarousel class="w-full" recipe={re} />
             <p class=" md:hidden text-[28pt] font-bold leading-none mt-2">{re.name}</p>

src/pages/recipe/new.astro

@@ -1,63 +0,0 @@
----
-import client from "@/data/pocketbase";
-import SiteLayout from "@/layouts/base";
-import ImageCarousel from "@/components/Detail/ImageCarousel";
-import IngredientTableView from "@/components/Detail/IngredientTableView";
-import StepView from "@/components/Detail/StepView";
-import InfoView from "@/components/Detail/InfoView";
-
-const { recipeid } = Astro.params;
-
----
-
-<script>
-
-</script>
-
-<SiteLayout>
-    <div class="flex flex-col md:flex-row">
-        <div class="flex flex-1/3 flex-col mt-2 md:mt-4 sticky">
-            <div class="w-full bg-green-600 h-50">
-                Image Upload
-            </div>
-            <!-- <ImageCarousel class="w-full" recipe={re} /> -->
-            <!-- <p class=" md:hidden text-[28pt] font-bold leading-none mt-2">{re.name}</p> -->
-
-            <!-- Details -->
-            <!-- <InfoView re={re} /> -->
-
-            <p class="text-[22pt] font-bold 'md:mt-4'">Ingredients</p>
-            <table class={`table-auto text-left bg-[#2a2b2c] md:w-80 px-4 rounded-lg 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>
-                    </tr>
-                </thead>
-                <tbody id="ingredient-table" class="border-t px-4 py-2 border-gray-600">
-                    <tr id="ingredient-input" class="">
-                        <td class="px-4 py-1">˚
-                            <input class="w-3/4 bg-white/20 rounded-lg px-2" type="text">
-                        </td>
-                        <td class="px-4 py-1">
-                            <input class="w-3/4 bg-white/20 rounded-lg px-2" type="text">
-                        </td>
-                        <td class="px-4 py-1">
-                            <!-- <input class="w-3/4 text-wrap bg-white/20 rounded-lg px-2" type="text"> -->
-                             <textarea class="block  bg-white/20 rounded-lg px-2"></textarea>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-        
-        <div class="flex w-full flex-col">
-            <!-- <p class="hidden md:block text-[28pt] font-bold pl-5">{re.name}</p> -->
-
-            <!-- Steps -->
-            <!-- <StepView steps={steps} /> -->
-        </div>
-
-    </div>
-</SiteLayout>