fix: adjust mobile screen styling

Author: MehrdadShirvani

src/content/index.md

@@ -106,54 +106,43 @@ tags:
 
 	/* Responsive stacking */
 	@media (max-width: 700px) {
-  table {
-    width: 100%;
-  }
 
-  table, thead, tbody, th, td, tr {
-    display: block;
+  /* Make each row a vertical card */
+  tr {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 2em;
+    border: 1px solid #333;
+    border-radius: 10px;
+    overflow: hidden;
   }
 
-  th {
+  /* Hide header row only */
+  thead {
     display: none;
   }
 
-  tr {
-    margin-bottom: 2em;
-    border: none;
-  }
-
   td {
+    width: 100%;
     border: none;
-    padding: 0;
+    padding: 1em;
+    box-sizing: border-box;
   }
 
-  /* Poster cell */
-  td:first-child img {
+  /* Image: full width, auto height */
+  td img {
     width: 100%;
-    border-radius: 10px;
-    margin-bottom: 1em;
+    height: auto;
+    max-height: none;
+    object-fit: contain;
+    border-radius: 0;
   }
 
-  /* Text cell */
-  td:nth-child(2) {
+  /* Container padding fix */
+  .table-container {
     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>