From e2d5042e6000a0804ca074f4d7ea3ea79ac9ed71 Mon Sep 17 00:00:00 2001
From: makearmy <alex@makearmy.io>
Date: Sun, 28 Sep 2025 00:22:55 -0400
Subject: [PATCH] screenshot display size and position tweaks

---
 app/settings/fiber/[id]/fiber.tsx | 35 +++++++++++++------------------
 1 file changed, 15 insertions(+), 20 deletions(-)

diff --git a/app/settings/fiber/[id]/fiber.tsx b/app/settings/fiber/[id]/fiber.tsx
index 939ca23a..20b6dfd5 100644
--- a/app/settings/fiber/[id]/fiber.tsx
+++ b/app/settings/fiber/[id]/fiber.tsx
@@ -16,7 +16,6 @@ export default function FiberSettingDetailPage() {
   const [claimErr, setClaimErr] = useState<string | null>(null);
 
   useEffect(() => {
-    // include owner + screen in fields
     const url =
     `${process.env.NEXT_PUBLIC_API_BASE_URL}/items/settings_fiber/${id}` +
     `?fields=` +
@@ -106,11 +105,11 @@ export default function FiberSettingDetailPage() {
   const openSearchInNewTab = (value: string) => {
     const url = new URL("/fiber-settings", window.location.origin);
     url.searchParams.set("query", value);
-    const anchor = document.createElement("a");
-    anchor.href = url.toString();
-    anchor.target = "_blank";
-    anchor.rel = "noopener noreferrer";
-    anchor.click();
+    const a = document.createElement("a");
+    a.href = url.toString();
+    a.target = "_blank";
+    a.rel = "noopener noreferrer";
+    a.click();
   };
 
   const onClaim = async () => {
@@ -180,7 +179,6 @@ export default function FiberSettingDetailPage() {
     )}
     </div>
 
-    {/* keep your existing back link for now (external detail view) */}
     <a
     href="/fiber-settings"
     className="inline-block mt-2 px-4 py-2 bg-accent text-background rounded-md text-sm self-start"
@@ -192,7 +190,6 @@ export default function FiberSettingDetailPage() {
     {/* Result Photo + Material */}
     <div className="card bg-card p-4 grid grid-cols-1 md:grid-cols-2 gap-4 items-start">
     <div className="flex justify-center">
-    {/* Primary result photo */}
     {setting.photo?.filename_disk && (
       <a
       href={`https://forms.lasereverything.net/assets/${setting.photo.filename_disk}`}
@@ -258,36 +255,34 @@ export default function FiberSettingDetailPage() {
     <small>-Values Focus Closer | +Values Focus Further</small>
     </div>
 
-    {/* Laser (now shows the screen image, side-by-side with specs) */}
+    {/* Laser (heading above specs; screen image same size as result) */}
     <div className="card bg-card p-4">
-    <h2 className="text-xl font-semibold mb-2">Laser</h2>
-
     <div className="grid grid-cols-1 md:grid-cols-2 gap-4 items-start">
-    {/* Screenshot on the left (if present) */}
+    {/* Screen image */}
+    <div className="flex justify-center">
     {setting.screen?.filename_disk ? (
       <a
       href={`https://forms.lasereverything.net/assets/${setting.screen.filename_disk}`}
       target="_blank"
       rel="noopener noreferrer"
-      className="flex justify-center"
       title={setting.screen?.title || "Screenshot"}
       >
       <Image
       src={`https://forms.lasereverything.net/assets/${setting.screen.filename_disk}`}
       alt={setting.screen?.title || "Screenshot"}
-      width={300}
-      height={300}
-      className="rounded object-contain max-w-[300px] max-h-[300px]"
+      width={250}
+      height={250}
+      className="rounded object-contain max-w-[250px] max-h-[250px]"
       />
       </a>
     ) : (
-      <div className="text-sm text-muted-foreground md:justify-self-center">
-      No screenshot
-      </div>
+      <div className="text-sm text-muted-foreground">No screenshot</div>
     )}
+    </div>
 
-    {/* Specs on the right */}
+    {/* Specs + heading */}
     <div>
+    <h2 className="text-xl font-semibold mb-2">Laser</h2>
     <p>
     <strong>Source Make:</strong> {setting.source?.make || "—"}
     </p>