From 101460cd4742929ba6fdb62950a88515bdefe28d Mon Sep 17 00:00:00 2001
From: Brock H Caldwell <brock@caldwellnetworks.com>
Date: Sun, 29 Jun 2025 22:26:01 -0500
Subject: [PATCH] fix: mobile results formatting

---
 assets/styles/app.css                              |  4 ++++
 templates/torrentio/partial/option-table.html.twig | 10 +++++-----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/assets/styles/app.css b/assets/styles/app.css
index ced5b0b..80178fa 100644
--- a/assets/styles/app.css
+++ b/assets/styles/app.css
@@ -66,6 +66,10 @@ dialog[data-dialog-target="dialog"][closing] {
 
 .options-table {
     display: flex;
+
+    :last-child {
+        border-bottom: none;
+    }
 }
 
 @media screen and (min-width: 768px) {
diff --git a/templates/torrentio/partial/option-table.html.twig b/templates/torrentio/partial/option-table.html.twig
index 2068293..70d032c 100644
--- a/templates/torrentio/partial/option-table.html.twig
+++ b/templates/torrentio/partial/option-table.html.twig
@@ -1,9 +1,9 @@
-<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 flex-row flex-no-wrap overflow-hidden {{ results.media.mediaType == "tvshows" ? "hidden" : "options-table" }}"
+<table class="w-full max-w-[75vw] text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 flex-row flex-no-wrap {{ results.media.mediaType == "tvshows" ? "hidden" : "options-table" }}"
        {{ stimulus_target(controller, "list") }}
 >
     <thead class="text-xs text-gray-700 uppercase dark:text-gray-400">
     {% for result in results.results %}
-    <tr class="dark:bg-stone-600 overflow-hidden flex flex-col md:flex-col flex-no wrap md:table-row mb-1 md:mb-0">
+    <tr class="dark:bg-stone-600 overflow-hidden flex flex-col md:flex-col flex-no wrap md:table-row border-b border-gray-500">
         <th scope="col"
             class="px-4 py-4 leading-[20px] font-medium text-gray-900 whitespace-nowrap dark:text-white">
             Size
@@ -37,7 +37,7 @@
     </thead>
     <tbody class="flex-1 sm:flex-none">
     {% for result in results.results %}
-        <tr class="bg-white dark:bg-slate-700 flex flex-col flex-no wrap sm:table-row mb-1 sm:mb-0" data-provider="{{ result.provider }}" data-languages="{{ result.languages|json_encode }}" {% if "tvshows" == results.media.mediaType %} data-season="{{ results.season }}"{% endif %}>
+        <tr class="bg-white dark:bg-slate-700 flex flex-col flex-no wrap sm:table-row border-b border-gray-500" data-provider="{{ result.provider }}" data-languages="{{ result.languages|json_encode }}" {% if "tvshows" == results.media.mediaType %} data-season="{{ results.season }}"{% endif %}>
             <td id="size" class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
                 {{ result.size }}
             </td>
@@ -53,10 +53,10 @@
             <td id="provider" class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50 " data-provider="{{ result.provider }}">
                 {{ result.provider }}
             </td>
-            <td id="language" class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50" data-languages="{{ result.languages|json_encode }}">
+            <td id="language" class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50 overflow-scroll" data-languages="{{ result.languages|json_encode }}">
                 {{ result.languageFlags|raw }}
             </td>
-            <td class="px-4 py-4 whitespace-nowrap text-sm text-end text-gray-800 dark:text-gray-50 flex flex-row gap-2 items-center justify-end">
+            <td class="px-4 py-4 whitespace-nowrap text-sm text-end text-gray-800 dark:text-gray-50 flex flex-row gap-2 items-center justify-start mb:justify-end">
                         <button class="download-btn p-1.5 bg-green-600 rounded-md text-gray-50"
                             {{ stimulus_controller('download_button', {
                                 url: result.url,