Bring the robot in

dcramer · Dec 31, 2023 · ee1e945 · ee1e945
1 parent cb2b781
commit ee1e945
Showing 1 changed file with 42 additions and 45 deletions.
diff --git a/apps/web/app/components/bottleOverview.tsx b/apps/web/app/components/bottleOverview.tsx
@@ -36,55 +36,52 @@ export default function BottleOverview({ bottle }: { bottle: Bottle }) {
       </div>
 
       <div className="my-6 px-3 md:px-0">
-        <ClientOnly>
-          {() => (
-            <QueryBoundary
-              fallback={
-                <div
-                  className="animate-pulse bg-slate-800"
-                  style={{ height: 200 }}
-                />
-              }
-              loading={<Fragment />}
-            >
-              <BottleReviews bottleId={bottle.id} />
-            </QueryBoundary>
-          )}
-        </ClientOnly>
-      </div>
-
-      {(bottle.description || bottle.tastingNotes) && (
-        <div className="my-6 px-3 md:px-0">
-          {bottle.description && (
-            <>
-              <h3 className="text-highlight text-lg font-bold">Summary</h3>
-              <div className="flex space-x-4">
+        <div className="flex space-x-4">
+          <div className="max-w-none flex-auto">
+            <ClientOnly>
+              {() => (
+                <QueryBoundary
+                  fallback={
+                    <div
+                      className="animate-pulse bg-slate-800"
+                      style={{ height: 200 }}
+                    />
+                  }
+                  loading={<Fragment />}
+                >
+                  <BottleReviews bottleId={bottle.id} />
+                </QueryBoundary>
+              )}
+            </ClientOnly>
+            {bottle.description && (
+              <>
+                <h3 className="text-highlight text-lg font-bold">Summary</h3>
                 <div className="prose prose-invert -mt-5 max-w-none flex-auto">
                   <Markdown content={bottle.description} />
                 </div>
-                <img src={RobotImage} className="hidden h-40 w-40 sm:block" />
-              </div>
-            </>
-          )}
-          {bottle.tastingNotes && (
-            <>
-              <h3 className="text-highlight text-lg font-bold">
-                Tasting Notes
-              </h3>
-              <div className="prose prose-invert max-w-none flex-auto">
-                <dl>
-                  <dt>Nose</dt>
-                  <dd>{bottle.tastingNotes.nose}</dd>
-                  <dt>Palate</dt>
-                  <dd>{bottle.tastingNotes.palate}</dd>
-                  <dt>Finish</dt>
-                  <dd>{bottle.tastingNotes.finish}</dd>
-                </dl>
-              </div>
-            </>
-          )}
+              </>
+            )}
+            {bottle.tastingNotes && (
+              <>
+                <h3 className="text-highlight text-lg font-bold">
+                  Tasting Notes
+                </h3>
+                <div className="prose prose-invert max-w-none flex-auto">
+                  <dl>
+                    <dt>Nose</dt>
+                    <dd>{bottle.tastingNotes.nose}</dd>
+                    <dt>Palate</dt>
+                    <dd>{bottle.tastingNotes.palate}</dd>
+                    <dt>Finish</dt>
+                    <dd>{bottle.tastingNotes.finish}</dd>
+                  </dl>
+                </div>
+              </>
+            )}
+          </div>
+          <img src={RobotImage} className="hidden h-40 w-40 sm:block" />
         </div>
-      )}
+      </div>
     </>
   );
 }