quick fix

Author: TalhaMudo

frontend/src/App.tsx

@@ -167,31 +167,23 @@ export const App: React.FC = () => {
                 {metrics.jobs_summary.length === 0 ? (
                   <p className="hint">No jobs yet.</p>
                 ) : (
-                  <div className="jobs-table">
-                    <table>
-                      <thead>
-                        <tr>
-                          <th>Job ID</th>
-                          <th>Origin</th>
-                          <th>Depth</th>
-                          <th>Status</th>
-                          <th>Processed</th>
-                          <th>Created</th>
-                        </tr>
-                      </thead>
-                      <tbody>
-                        {metrics.jobs_summary.map((job) => (
-                          <tr key={job.id}>
-                            <td>{job.id.slice(0, 8)}…</td>
-                            <td>{job.origin_url}</td>
-                            <td>{job.max_depth}</td>
-                            <td>{job.status}</td>
-                            <td>{job.processed_urls}</td>
-                            <td>{new Date(job.created_at).toLocaleTimeString()}</td>
-                          </tr>
-                        ))}
-                      </tbody>
-                    </table>
+                  <div className="jobs-list">
+                    {metrics.jobs_summary.map((job) => (
+                      <article className="job-card" key={job.id}>
+                        <div className="job-card-header">
+                          <strong>{job.id.slice(0, 8)}…</strong>
+                          <span className={`badge badge-${job.status === "running" ? "normal" : "idle"}`}>
+                            {job.status}
+                          </span>
+                        </div>
+                        <div className="job-card-url">{job.origin_url}</div>
+                        <div className="job-card-meta">
+                          <span>Depth: {job.max_depth}</span>
+                          <span>Processed: {job.processed_urls}</span>
+                          <span>{new Date(job.created_at).toLocaleTimeString()}</span>
+                        </div>
+                      </article>
+                    ))}
                   </div>
                 )}
               </>
@@ -220,7 +212,7 @@ export const App: React.FC = () => {
               {results.length === 0 ? (
                 <p className="hint">No results yet. Try searching after indexing.</p>
               ) : (
-                <table>
+                <table className="search-table">
                   <thead>
                     <tr>
                       <th style={{ width: "40%" }}>URL</th>
@@ -233,12 +225,12 @@ export const App: React.FC = () => {
                   <tbody>
                     {results.map((r) => (
                       <tr key={`${r.relevant_url}-${r.depth}`}>
-                        <td>
-                          <a href={r.relevant_url} target="_blank" rel="noreferrer">
+                        <td className="url-cell">
+                          <a className="result-link" href={r.relevant_url} target="_blank" rel="noreferrer">
                             {r.relevant_url}
                           </a>
                         </td>
-                        <td>{r.origin_url}</td>
+                        <td className="url-cell">{r.origin_url}</td>
                         <td>{r.depth}</td>
                         <td>{r.score?.toFixed(2)}</td>
                         <td>{r.title}</td>

frontend/src/styles.css

@@ -185,12 +185,19 @@ button:disabled {
   flex: 1;
   min-height: 0;
   overflow: auto;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  border-radius: 0.75rem;
+  background: rgba(7, 12, 26, 0.45);
 }
 
-.jobs-table {
+.jobs-list {
   margin-top: 0.4rem;
-  max-height: 220px;
+  max-height: 320px;
   overflow: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding-right: 0.2rem;
 }
 
 table {
@@ -203,19 +210,71 @@ table {
 th,
 td {
   border-bottom: 1px solid rgba(55, 65, 81, 0.8);
-  padding: 0.3rem 0.35rem;
+  padding: 0.65rem 0.7rem;
   text-align: left;
+  vertical-align: top;
 }
 
 th {
   font-weight: 600;
   color: #e5e7eb;
+  position: sticky;
+  top: 0;
+  background: rgba(15, 23, 42, 0.98);
+  z-index: 1;
 }
 
 td a {
   color: #a5b4fc;
 }
 
+.search-table th {
+  font-size: 0.75rem;
+  letter-spacing: 0.02em;
+}
+
+.url-cell {
+  word-break: break-word;
+  overflow-wrap: anywhere;
+}
+
+.result-link {
+  display: inline-block;
+  word-break: break-word;
+  overflow-wrap: anywhere;
+}
+
+.job-card {
+  border: 1px solid rgba(148, 163, 184, 0.2);
+  border-radius: 0.75rem;
+  padding: 0.8rem 0.9rem;
+  background: rgba(7, 12, 26, 0.45);
+}
+
+.job-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  margin-bottom: 0.45rem;
+}
+
+.job-card-url {
+  font-size: 0.82rem;
+  color: #cbd5f5;
+  word-break: break-word;
+  overflow-wrap: anywhere;
+  margin-bottom: 0.55rem;
+}
+
+.job-card-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem 0.9rem;
+  font-size: 0.78rem;
+  color: #9ca3af;
+}
+
 @media (max-width: 800px) {
   .app {
     padding: 0.75rem;