fix: adds r-tablecell class

assets/styles/app.css

@@ -64,6 +64,16 @@ dialog[data-dialog-target="dialog"][closing] {
     animation: fade-out 200ms forwards;
 }
 
+.r-tablecell {
+    display: none;
+}
+
+@media screen and (min-width: 768px) {
+    .r-tablecell {
+        display: inline-table;
+    }
+}
+
 .options-table {
     display: flex;
 

templates/components/DownloadList.html.twig

@@ -15,11 +15,11 @@
                 Title
             </th>
             <th scope="col"
-                class="hidden md:table-cell px-6 py-3 text-start text-xs font-medium text-stone-500 uppercase dark:text-stone-800 truncate {{ isWidget == true ?? "hidden" }}">
+                class="px-6 py-3 text-start text-xs font-medium text-stone-500 uppercase dark:text-stone-800 truncate {{ isWidget == true ? "hidden" : "r-tablecell" }}">
                 Filename
             </th>
             <th scope="col"
-                class="hidden md:table-cell px-6 py-3 text-start text-xs font-medium text-stone-500 uppercase dark:text-stone-800 truncate {{ isWidget == true ?? "hidden" }}">
+                class="px-6 py-3 text-start text-xs font-medium text-stone-500 uppercase dark:text-stone-800 truncate {{ isWidget == true ? "hidden" : "r-tablecell" }}">
                 Media type
             </th>
             <th scope="col"
@@ -27,7 +27,7 @@
                 Progress
             </th>
             <th scope="col"
-                class="hidden md:table-cell px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase dark:text-stone-800">
+                class="px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase dark:text-stone-800">
             </th>
         </tr>
         </thead>

templates/components/DownloadListRow.html.twig

@@ -1,7 +1,7 @@
 <tr{{ attributes }} class="hover:bg-gray-200" id="ad_download_{{ download.id }}">
     <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-stone-800 truncate">
         <a href="{{ path('app_search_result', {imdbId: download.imdbId, mediaType: download.mediaType}) }}"
-           class="mr-1 hover:underline rounded-md"
+           class="mr-1 hover:underline rounded-md max-w-[10ch] md:max-w-[unset] truncate"
         >
             {{ download.title }}
         </a>
@@ -11,11 +11,11 @@
         {% endif %}
     </td>
 
-    <td class="hidden md:table-cell px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-stone-800 max-w-[60ch] {{ isWidget == true ?? "hidden" }} truncate">
+    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-stone-800 max-w-[60ch] {{ isWidget == true ? "hidden" : "r-tablecell" }} truncate">
-        {{ download.filename }}
+       {{ download.filename }}
     </td>
 
-    <td class="hidden md:table-cell px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-stone-800 truncate {{ isWidget == true ?? "hidden" }}">
+    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-stone-800 truncate {{ isWidget == true ? "hidden" : "r-tablecell" }}">
         {{ download.mediaType }}
     </td>
 

templates/components/MonitorList.html.twig

@@ -41,7 +41,7 @@
         <tbody id="monitors" class="divide-y divide-gray-50">
         {% if this.monitors.items|length > 0 %}
             {% for monitor in this.monitors.items %}
-                <twig:MonitorListRow :monitor="monitor" />
+                <twig:MonitorListRow :monitor="monitor" isWidget="{{ this.isWidget }}" />
             {% endfor %}
             {% if this.isWidget and this.monitors.items|length > 5 %}
                 <tr  id="monitor_view_all">