Improve raw patch rendering and YouTube embed layout

apps/web/src/components/DiffPanel.tsx

@@ -5,6 +5,7 @@ import { useNavigate, useParams, useSearch } from "@tanstack/react-router";
 import { ThreadId, type TurnId } from "@okcode/contracts";
 import { CheckIcon, ChevronDownIcon, Columns2Icon, Rows3Icon, TextWrapIcon } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { RawPatchViewer } from "~/components/pr-review/RawPatchViewer";
 import { gitBranchesQueryOptions } from "~/lib/gitReactQuery";
 import { checkpointDiffQueryOptions } from "~/lib/providerReactQuery";
 import { cn } from "~/lib/utils";
@@ -694,21 +695,7 @@ export default function DiffPanel({ mode = "inline" }: DiffPanelProps) {
                 })}
               </Virtualizer>
             ) : (
-              <div className="h-full overflow-auto p-2">
-                <div className="space-y-2">
-                  <p className="text-[11px] text-muted-foreground/75">{renderablePatch.reason}</p>
-                  <pre
-                    className={cn(
-                      "max-h-[72vh] rounded-md border border-border/70 bg-background/70 p-3 font-mono text-[11px] leading-relaxed text-muted-foreground/90",
-                      diffWordWrap
-                        ? "overflow-auto whitespace-pre-wrap wrap-break-word"
-                        : "overflow-auto",
-                    )}
-                  >
-                    {renderablePatch.text}
-                  </pre>
-                </div>
-              </div>
+              <RawPatchViewer text={renderablePatch.text} reason={renderablePatch.reason} />
             )}
           </div>
         </>

apps/web/src/components/YouTubePlayer.tsx

@@ -401,9 +401,9 @@ export function YouTubePlayerDrawer() {
             title="YouTube Player"
             src={embedUrl}
             width="100%"
-            height="80"
+            height="260"
             allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
-            sandbox="allow-scripts allow-popups allow-forms allow-presentation"
+            sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-presentation"
             loading="lazy"
             className="rounded-xl border-0"
           />

apps/web/src/components/pr-review/PrWorkspace.tsx

@@ -28,6 +28,7 @@ import {
   summarizeFileDiffStats,
   threadTone,
 } from "./pr-review-utils";
+import { RawPatchViewer } from "./RawPatchViewer";
 
 const FILE_VIEW_MODE_SCHEMA = Schema.Literals(["single", "all"]);
 
@@ -162,14 +163,7 @@ export function PrWorkspace({
           No patch is available for this pull request.
         </div>
       ) : renderablePatch.kind === "raw" ? (
-        <div className="min-h-0 flex-1 overflow-auto p-4">
-          <div className="rounded-2xl border border-border/70 bg-background/90 p-4">
-            <p className="mb-3 text-sm text-muted-foreground">{renderablePatch.reason}</p>
-            <pre className="overflow-auto whitespace-pre-wrap text-xs leading-6 text-foreground/85">
-              {renderablePatch.text}
-            </pre>
-          </div>
-        </div>
+        <RawPatchViewer text={renderablePatch.text} reason={renderablePatch.reason} />
       ) : (
         <Virtualizer className="min-h-0 flex-1 overflow-auto px-3 pb-4 pt-3">
           {visibleFiles.map((fileDiff) => {