fix: adjust mobile screen styling

Author: MehrdadShirvani

src/content/index.md

@@ -106,22 +106,54 @@ tags:
 
 	/* Responsive stacking */
 	@media (max-width: 700px) {
-	  table, thead, tbody, th, td, tr {
-	    display: block;
-	    width: 100%;
-	  }
-	
-	  th {
-	    display: none;
-	  }
-	
-	  td {
-	    border: none;
-	    border-bottom: 1px solid #ddd;
-	    margin-bottom: 1em;
-	  }
-	
-	}
+  table {
+    width: 100%;
+  }
+
+  table, thead, tbody, th, td, tr {
+    display: block;
+  }
+
+  th {
+    display: none;
+  }
+
+  tr {
+    margin-bottom: 2em;
+    border: none;
+  }
+
+  td {
+    border: none;
+    padding: 0;
+  }
+
+  /* Poster cell */
+  td:first-child img {
+    width: 100%;
+    border-radius: 10px;
+    margin-bottom: 1em;
+  }
+
+  /* Text cell */
+  td:nth-child(2) {
+    padding: 0 0.5em;
+  }
+
+  /* Tags wrap nicely */
+  .tags {
+    gap: 0.4em;
+    margin-bottom: 0.6em;
+  }
+
+  /* Make rows feel like cards */
+  tr {
+    background: #111;
+    padding: 1em;
+    border-radius: 12px;
+  }
+}
+
 </style>
 <div class="table-container">
   <table>