detail page complated

src/widgets/detail/ui/detailPage.tsx

@@ -129,21 +129,21 @@ const IconDownload = () => (
     />
   </svg>
 );
-const IconBack = () => (
-  <svg
-    className="w-4 h-4"
-    fill="none"
-    stroke="currentColor"
-    viewBox="0 0 24 24"
-  >
-    <path
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth={2}
-      d="M10 19l-7-7m0 0l7-7m-7 7h18"
-    />
-  </svg>
-);
+// const IconBack = () => (
+//   <svg
+//     className="w-4 h-4"
+//     fill="none"
+//     stroke="currentColor"
+//     viewBox="0 0 24 24"
+//   >
+//     <path
+//       strokeLinecap="round"
+//       strokeLinejoin="round"
+//       strokeWidth={2}
+//       d="M10 19l-7-7m0 0l7-7m-7 7h18"
+//     />
+//   </svg>
+// );
 const IconSource = () => (
   <svg
     className="w-3.5 h-3.5"
@@ -208,7 +208,7 @@ const SubmissionInfoCard: React.FC<CheckDetailViewProps> = ({ check }) => (
       value={
         <span className="flex items-center gap-2 justify-end flex-wrap">
           <FileTypeBadge extension={getFileExtension(check.fileName)} />
-          <span className="font-mono text-xs text-slate-700 break-all max-w-[240px] text-right">
+          <span className="font-mono text-xs text-slate-700 break-all max-w-60 text-right">
             {check.fileName}
           </span>
         </span>
@@ -375,7 +375,7 @@ const CertificateCard: React.FC<CheckDetailViewProps> = ({ check }) => {
   if (!check.certificate) {
     return (
       <SectionCard title="Certificate" icon={<IconCert />} accent="violet">
-        <div className="flex flex-col items-center justify-center py-8 text-center space-y-2">
+        <div className=" flex flex-col items-center justify-center py-8 text-center space-y-2">
           <div className="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center">
             <IconCert />
           </div>
@@ -397,7 +397,7 @@ const CertificateCard: React.FC<CheckDetailViewProps> = ({ check }) => {
   return (
     <SectionCard title="Certificate" icon={<IconCert />} accent="green">
       {/* Certificate visual */}
-      <div className="relative rounded-xl border-2 border-dashed border-emerald-200 bg-gradient-to-br from-emerald-50 to-white p-5 mb-4 overflow-hidden">
+      <div className="relative rounded-xl border-2 border-dashed border-emerald-200 bg-linear-to-br from-emerald-50 to-white p-5 mb-4 overflow-hidden">
         <div className="absolute top-2 right-2 opacity-10">
           <svg
             className="w-20 h-20 text-emerald-600"
@@ -433,7 +433,7 @@ const CertificateCard: React.FC<CheckDetailViewProps> = ({ check }) => {
       <div className="mt-4">
         <a
           href={certificate.downloadUrl}
-          className="flex items-center justify-center gap-2 w-full py-2.5 px-4 bg-emerald-600 hover:bg-emerald-700 text-white text-sm font-semibold rounded-xl transition-colors"
+          className="flex items-center justify-center gap-2 py-2.5 px-4 bg-emerald-600 hover:bg-emerald-700 text-white text-sm font-semibold rounded-xl transition-colors"
         >
           <IconDownload />
           Download Certificate
@@ -448,9 +448,11 @@ const CertificateCard: React.FC<CheckDetailViewProps> = ({ check }) => {
 const CheckDetailView: React.FC<CheckDetailViewProps> = ({ check }) => (
   <div className="space-y-4">
     <CheckHeader check={check} />
-    <SubmissionInfoCard check={check} />
+    <div className="flex items-start gap-4 w-full">
+      <CertificateCard check={check} />
+      <SubmissionInfoCard check={check} />
+    </div>
     <ResultCard check={check} />
-    <CertificateCard check={check} />
   </div>
 );
 
@@ -463,33 +465,12 @@ interface PlagiarismDetailPageProps {
 
 export const PlagiarismDetailPage: React.FC<PlagiarismDetailPageProps> = ({
   checkId,
-  onBack,
 }) => {
   const { check, loadingState, error, reload } = usePlagiarismDetail(checkId);
 
   return (
-    <div className="min-h-screen bg-slate-50 font-sans">
-      {/* Top nav */}
-      <header className="sticky top-0 z-10 bg-white border-b border-slate-100 px-4 py-3 flex items-center gap-3 shadow-sm">
-        {onBack && (
-          <button
-            onClick={onBack}
-            className="p-2 rounded-xl hover:bg-slate-100 text-slate-500 hover:text-slate-800 transition-colors"
-            aria-label="Go back"
-          >
-            <IconBack />
-          </button>
-        )}
-        <div>
-          <h1 className="font-bold text-slate-900 text-sm leading-tight">
-            Plagiarism Check Detail
-          </h1>
-          <p className="text-xs text-slate-400 font-mono">{checkId}</p>
-        </div>
-      </header>
-
-      {/* Body */}
-      <main className="max-w-2xl mx-auto px-4 py-6">
+    <div className="bg-slate-50 font-sans">
+      <main className="max-w-300 mx-auto px-4 py-6">
         {loadingState === 'loading' && <SkeletonLoader />}
         {loadingState === 'error' && (
           <ErrorState message={error ?? 'Unknown error'} onRetry={reload} />