screenshot display fix

app/settings/fiber/[id]/fiber.tsx

@@ -83,10 +83,7 @@ export default function FiberSettingDetailPage() {
       <h2 className="text-2xl font-semibold mb-2">{title}</h2>
       <div className="grid gap-4 grid-cols-1 md:grid-cols-2">
       {filtered.map((item, i) => (
-        <div
-        key={i}
-        className="border border-border rounded-lg p-4 bg-card"
-        >
+        <div key={i} className="border border-border rounded-lg p-4 bg-card">
         {fields.map(({ key, label, condition }: any) => {
           const value = item[key];
           if (condition && !condition(item)) return null;
@@ -152,9 +149,7 @@ export default function FiberSettingDetailPage() {
     {/* Title / Meta / Ownership */}
     <div className="card bg-card p-4 flex flex-col justify-between">
     <div>
-    <h1 className="text-3xl font-bold mb-1">
-    {setting.setting_title}
-    </h1>
+    <h1 className="text-3xl font-bold mb-1">{setting.setting_title}</h1>
 
     <div className="space-y-1 text-sm text-muted-foreground mb-3">
     <p>
@@ -194,16 +189,15 @@ export default function FiberSettingDetailPage() {
     </a>
     </div>
 
-    {/* Photo + Material */}
+    {/* 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 flex-col items-center gap-4">
-    {/* Primary photo */}
+    <div className="flex justify-center">
+    {/* Primary result photo */}
     {setting.photo?.filename_disk && (
       <a
       href={`https://forms.lasereverything.net/assets/${setting.photo.filename_disk}`}
       target="_blank"
       rel="noopener noreferrer"
-      className="block"
       >
       <Image
       src={`https://forms.lasereverything.net/assets/${setting.photo.filename_disk}`}
@@ -214,25 +208,6 @@ export default function FiberSettingDetailPage() {
       />
       </a>
     )}
-
-    {/* Screen / Screenshot (NEW visible block) */}
-    {setting.screen?.filename_disk && (
-      <a
-      href={`https://forms.lasereverything.net/assets/${setting.screen.filename_disk}`}
-      target="_blank"
-      rel="noopener noreferrer"
-      className="block"
-      title={setting.screen?.title || "Screenshot"}
-      >
-      <Image
-      src={`https://forms.lasereverything.net/assets/${setting.screen.filename_disk}`}
-      alt={setting.screen?.title || "Screenshot"}
-      width={250}
-      height={250}
-      className="rounded object-contain max-w-[250px] max-h-[250px]"
-      />
-      </a>
-    )}
     </div>
 
     <div>
@@ -283,9 +258,36 @@ export default function FiberSettingDetailPage() {
     <small>-Values Focus Closer | +Values Focus Further</small>
     </div>
 
-    {/* Laser */}
+    {/* Laser (now shows the screen image, side-by-side with specs) */}
     <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) */}
+    {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]"
+      />
+      </a>
+    ) : (
+      <div className="text-sm text-muted-foreground md:justify-self-center">
+      No screenshot
+      </div>
+    )}
+
+    {/* Specs on the right */}
+    <div>
     <p>
     <strong>Source Make:</strong> {setting.source?.make || "—"}
     </p>
@@ -310,6 +312,8 @@ export default function FiberSettingDetailPage() {
     </p>
     </div>
     </div>
+    </div>
+    </div>
 
     {/* Notes */}
     {setting.setting_notes && (