fix: styles

assets/controllers/movie_results_controller.js

@@ -56,6 +56,7 @@ export default class extends Controller {
             }
 
             let include = true;
+            option.classList.add('r-tablerow');
             option.classList.remove('hidden');
             option.querySelector('input[type="checkbox"]').checked = false;
 
@@ -81,6 +82,7 @@ export default class extends Controller {
             }
 
             if (false === include) {
+                option.classList.remove('r-tablerow');
                 option.classList.add('hidden');
             } else if (true === firstIncluded) {
                 count = 1;

assets/controllers/tv_results_controller.js

@@ -135,6 +135,7 @@ export default class extends Controller {
             }
 
             let include = true;
+            option.classList.add('r-tablerow');
             option.classList.remove('hidden');
             option.querySelector('input[type="checkbox"]').checked = false;
 
@@ -160,6 +161,7 @@ export default class extends Controller {
             }
 
             if (false === include) {
+                option.classList.remove('r-tablerow');
                 option.classList.add('hidden');
             } else if (true === firstIncluded) {
                 count = 1;

assets/styles/app.css

@@ -68,10 +68,18 @@ dialog[data-dialog-target="dialog"][closing] {
     display: none;
 }
 
+.r-tablerow {
+    display: flex;
+}
+
 @media screen and (min-width: 768px) {
     .r-tablecell {
         display: inline-table;
     }
+
+    .r-tablerow {
+        display: table-row;
+    }
 }
 
 .options-table {

tailwind.config.js

@@ -21,7 +21,8 @@ module.exports = {
       "transition-opacity",
       "ease-in",
       "duration-700",
-      "opacity-100"
+      "opacity-100",
+      "table-row"
   ],
   theme: {
       extend: {

templates/base.html.twig

@@ -20,7 +20,7 @@
             </div>
             <div class="col-span-6 md:col-span-5 h-screen overflow-y-scroll">
                 <twig:Header />
-                <h2 class="px-4 my-2 text-3xl font-bold text-gray-50">{% block h2 %}{% endblock %}</h2>
+                <h2 class="px-4 mt-4 mb-2 text-3xl font-bold text-gray-50">{% block h2 %}{% endblock %}</h2>
                 {% block body %}{% endblock %}
             </div>
         </div>

templates/downloads/index.html.twig

@@ -4,13 +4,13 @@
 {% block h2 %}Downloads{% endblock %}
 
 {% block body %}
-    <div class="p-4">
+    <div class="px-4 py-2">
         <twig:Card title="Active Downloads">
             <twig:DownloadList type="active" :isWidget="false" :perPage="10"></twig:DownloadList>
         </twig:Card>
     </div>
 
-    <div class="p-4">
+    <div class="px-4 py-2">
         <twig:Card title="Recent Downloads">
             <twig:DownloadList type="complete" :isWidget="false" :perPage="10"></twig:DownloadList>
         </twig:Card>

templates/index/index.html.twig

@@ -1,10 +1,10 @@
 {% extends 'base.html.twig' %}
 
 {% block title %}Dashboard — Torsearch{% endblock %}
+{% block h2 %}Dashboard{% endblock %}
 
 {% block body %}
     <div class="p-4 flex flex-col grow gap-4 z-30">
-        <h2 class="mb-2 text-3xl font-bold text-gray-50">Dashboard</h2>
         <div class="flex flex-col md:flex-row gap-4">
             <twig:Card title="Active Downloads" class="w-full">
                 <twig:DownloadList :type="'active'" />

templates/monitor/index.html.twig

@@ -4,16 +4,14 @@
 {% block h2 %}Monitors{% endblock %}
 
 {% block body %}
-    <div class="flex flex-row">
-
-        <div class="p-2 flex flex-col gap-4">
-            <twig:Card title="Active Monitors">
-                <twig:MonitorList :type="'active'" :isWidget="false" :perPage="10"></twig:MonitorList>
-            </twig:Card>
-            <twig:Card title="Complete Monitors">
-                <twig:MonitorList :type="'complete'" :isWidget="false" :perPage="10"></twig:MonitorList>
-            </twig:Card>
-        </div>
-
+    <div class="px-4 py-2">
+        <twig:Card title="Active Monitors">
+            <twig:MonitorList :type="'active'" :isWidget="false" :perPage="10"></twig:MonitorList>
+        </twig:Card>
+    </div>
+    <div class="px-4 py-2">
+        <twig:Card title="Complete Monitors">
+            <twig:MonitorList :type="'complete'" :isWidget="false" :perPage="10"></twig:MonitorList>
+        </twig:Card>
     </div>
 {% endblock %}

templates/torrentio/partial/option-table.html.twig

@@ -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 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 %}>
+        <tr class="bg-white dark:bg-slate-700 flex flex-col flex-no wrap r-tablerow 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>