fix: makes user preferences page responsive

fix: makes download list & monitor list responsive
fix: basic hamburger menu button
2025-06-30 09:16:33 -05:00 · 2025-06-30 09:13:49 -05:00 · 2025-06-29 23:19:16 -05:00 · 2025-06-29 22:26:01 -05:00 · 2025-06-29 16:01:56 -05:00
22 changed files with 183 additions and 88 deletions
--- a/assets/controllers/hamburger_controller.js
+++ b/assets/controllers/hamburger_controller.js
@@ -0,0 +1,48 @@
+import { Controller } from '@hotwired/stimulus';
+
+/*
+* The following line makes this controller "lazy": it won't be downloaded until needed
+* See https://symfony.com/bundles/StimulusBundle/current/index.html#lazy-stimulus-controllers
+*/
+
+/* stimulusFetch: 'lazy' */
+export default class extends Controller {
+    static outlets = ['navbar']
+
+    initialize() {
+        // Called once when the controller is first instantiated (per element)
+
+        // Here you can initialize variables, create scoped callables for event
+        // listeners, instantiate external libraries, etc.
+        // this._fooBar = this.fooBar.bind(this)
+    }
+
+    connect() {
+        // Called every time the controller is connected to the DOM
+        // (on page load, when it's added to the DOM, moved in the DOM, etc.)
+
+        // Here you can add event listeners on the element or target elements,
+        // add or remove classes, attributes, dispatch custom events, etc.
+        // this.fooTarget.addEventListener('click', this._fooBar)
+    }
+
+    navbarOutletConnected(outlet) {
+        console.log(outlet)
+    }
+
+    toggleMenu() {
+        console.log(this.navbarOutlet);
+        this.navbarOutlet.toggle();
+    }
+
+    // Add custom controller actions here
+    // fooBar() { this.fooTarget.classList.toggle(this.bazClass) }
+
+    disconnect() {
+        // Called anytime its element is disconnected from the DOM
+        // (on page change, when it's removed from or moved in the DOM, etc.)
+
+        // Here you should remove all event listeners added in "connect()" 
+        // this.fooTarget.removeEventListener('click', this._fooBar)
+    }
+}
--- a/assets/controllers/navbar_controller.js
+++ b/assets/controllers/navbar_controller.js
@@ -17,9 +17,15 @@ export default class extends Controller {
                link.className = this.activeStyles;
            }
        });
+
+        window.addEventListener("resize", (event) => {
+
+        });
    }

-    setActive() {
-
+    toggle() {
+        this.element.parentElement.classList.toggle('hidden');
+        this.element.classList.toggle('fixed');
+        this.element.classList.toggle('z-20');
    }
 }
--- a/assets/controllers/tv_results_controller.js
+++ b/assets/controllers/tv_results_controller.js
@@ -90,13 +90,7 @@ export default class extends Controller {
    }

    toggleList() {
-        // if (!this.isOpen) {
-        //     this.toggleButtonTarget.classList.add('rotate-180');
-        //     this.toggleButtonTarget.classList.remove('-rotate-180');
-        // } else {
-        //     this.toggleButtonTarget.classList.add('-rotate-180');
-        //     this.toggleButtonTarget.classList.remove('rotate-180');
-        // }
+        this.listTarget.classList.toggle('options-table');
        this.listTarget.classList.toggle('hidden');
        this.toggleButtonTarget.classList.toggle('rotate-90');
        this.toggleButtonTarget.classList.toggle('-rotate-90');
--- a/assets/icons/pajamas/hamburger.svg
+++ b/assets/icons/pajamas/hamburger.svg
@@ -0,0 +1 @@
+<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 0 0"><path fill="currentColor" fill-rule="evenodd" d="M0 3.75A.75.75 0 0 1 .75 3h14.5a.75.75 0 0 1 0 1.5H.75A.75.75 0 0 1 0 3.75M0 8a.75.75 0 0 1 .75-.75h14.5a.75.75 0 0 1 0 1.5H.75A.75.75 0 0 1 0 8m.75 3.5a.75.75 0 0 0 0 1.5h14.5a.75.75 0 0 0 0-1.5z" clip-rule="evenodd"/></svg>
--- a/assets/styles/app.css
+++ b/assets/styles/app.css
@@ -63,3 +63,17 @@ dialog[data-dialog-target="dialog"][open] {
 dialog[data-dialog-target="dialog"][closing] {
    animation: fade-out 200ms forwards;
 }
+
+.options-table {
+    display: flex;
+
+    :last-child {
+        border-bottom: none;
+    }
+}
+
+@media screen and (min-width: 768px) {
+    .options-table {
+        display: inline-table;
+    }
+}
--- a/importmap.php
+++ b/importmap.php
@@ -40,4 +40,11 @@ return [
    'stimulus-use' => [
        'version' => '0.52.2',
    ],
+    'animate.css' => [
+        'version' => '4.1.1',
+    ],
+    'animate.css/animate.min.css' => [
+        'version' => '4.1.1',
+        'type' => 'css',
+    ],
 ];
--- a/templates/bare.html.twig
+++ b/templates/bare.html.twig
@@ -2,6 +2,7 @@
 <html>
    <head>
        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>{% block title %}Welcome!{% endblock %}</title>
        <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text><text y=%221.3em%22 x=%220.2em%22 font-size=%2276%22 fill=%22%23fff%22>sf</text></svg>">
        {% block stylesheets %}
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@@ -2,6 +2,7 @@
 <html>
    <head>
        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>{% block title %}Welcome!{% endblock %}</title>
        <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text><text y=%221.3em%22 x=%220.2em%22 font-size=%2276%22 fill=%22%23fff%22>sf</text></svg>">
        {% block stylesheets %}
@@ -13,11 +14,11 @@
        {% endblock %}
    </head>
    <body class="flex flex-col bg-stone-700">
-        <div class="grid grid-cols-6">
-            <div class="col-span-1 h-screen">
+        <div class="grid md:grid-cols-6">
+            <div class="hidden md:block md:col-span-1 md:h-screen">
                <twig:NavBar />
            </div>
-            <div class="col-span-5 h-screen overflow-y-scroll">
+            <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>
                {% block body %}{% endblock %}
--- a/templates/components/DownloadList.html.twig
+++ b/templates/components/DownloadList.html.twig
@@ -11,34 +11,30 @@
        <thead>
        <tr class="bg-orange-500 bg-filter bg-blur-lg bg-opacity-80 text-gray-950">
            <th scope="col"
-                class="px-6 py-3 text-start text-xs font-medium text-stone-500 uppercase dark:text-stone-800 {% if this.isWidget == true %}min-w-[45ch] max-w-[45ch]{% endif %} truncate">
+                class="px-6 py-3 text-start text-xs font-medium text-stone-500 uppercase dark:text-stone-800 truncate">
                Title
            </th>
-
-            {% if this.isWidget == false %}
-                <th scope="col"
-                    class="px-6 py-3 text-start text-xs font-medium text-stone-500 uppercase dark:text-stone-800 truncate">
-                    Filename
-                </th>
-                <th scope="col"
-                    class="px-6 py-3 text-start text-xs font-medium text-stone-500 uppercase dark:text-stone-800 truncate">
-                    Media type
-                </th>
-            {% endif %}
-
+            <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" }}">
+                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" }}">
+                Media type
+            </th>
            <th scope="col"
                class="px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase dark:text-stone-800">
                Progress
            </th>
            <th scope="col"
-                class="px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase dark:text-stone-800">
+                class="hidden md:table-cell px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase dark:text-stone-800">
            </th>
        </tr>
        </thead>
        <tbody id="{{ table_body_id }}" class="divide-y divide-gray-200 dark:divide-gray-50">
        {% if this.downloads.items|length > 0 %}
            {% for download in this.downloads.items %}
-                <twig:DownloadListRow download="{{ download }}" isWidget="{{ this.isWidget }}" />
+                <twig:DownloadListRow download="{{ download }}" isWidget="{{ isWidget }}" />
            {% endfor %}
            {% if this.isWidget == true and this.downloads.items|length > this.perPage %}
                <tr  id="download_view_all">
--- a/templates/components/DownloadListRow.html.twig
+++ b/templates/components/DownloadListRow.html.twig
@@ -11,14 +11,13 @@
        {% endif %}
    </td>

-    {% if isWidget == false %}
-        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-stone-800 max-w-[60ch] truncate">
-            {{ download.filename }}
-        </td>
-        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-stone-800 truncate">
-            {{ download.mediaType }}
-        </td>
-    {% endif %}
+    <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">
+        {{ 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" }}">
+        {{ download.mediaType }}
+    </td>

    <td class="px-6 py-4 whitespace-nowrap text-sm align-middle text-gray-800 dark:text-gray-50">
        {% if download.progress < 100 %}
@@ -32,7 +31,7 @@
            <twig:StatusBadge color="green" status="Complete" />
        {% endif %}
    </td>
-    <td id="action_buttons_{{ download.id }}" class="px-6 py-4 flex flex-row items-center">
+    <td id="hidden md:table-cell action_buttons_{{ download.id }}" class="px-6 py-4 flex flex-row items-center">
        {% if download.status == 'In Progress' and download.progress < 100 %}
            <button id="pause_{{ download.id }}" class="text-orange-500 hover:text-orange-600 mr-1 self-start" {{ stimulus_action('download_list', 'pauseDownload', 'click', {id: download.id}) }}>
                <twig:ux:icon name="icon-park-twotone:pause-one" width="16.75px" height="16.75px" class="rounded-full" />
--- a/templates/components/Filter.html.twig
+++ b/templates/components/Filter.html.twig
@@ -6,7 +6,7 @@
     data-result-filter-tv-results-outlet=".results"
     data-result-filter-tv-episode-list-outlet=".episode-list"
 >
-    <div class="w-full p-4 flex flex-row gap-4 bg-stone-500 text-md text-gray-500 dark:text-gray-50 rounded-lg">
+    <div class="w-full p-4 flex flex-col md:flex-row gap-4 bg-stone-500 text-md text-gray-500 dark:text-gray-50 rounded-lg">
        <label for="resolution">
            Resolution
            <select id="resolution"
--- a/templates/components/Header.html.twig
+++ b/templates/components/Header.html.twig
@@ -5,12 +5,21 @@
            <div class="md:flex md:items-center md:gap-12">
                <nav aria-label="Global" class="md:block">
                    <ul class="flex items-center gap-6 text-sm">
-                        <li><twig:ux:icon name="fluent:alert-12-regular" width="30px" class="text-gray-950 bg-orange-500 rounded-full p-2"/></li>
-                        <li>
+                        <li class="hidden">
+                            <twig:ux:icon name="fluent:alert-12-regular" width="30px" class="text-gray-950 bg-orange-500 rounded-full p-2"/>
+                        </li>
+                        <li class="hidden md:block">
                            <a href="{{ path('app_logout') }}">
                                <twig:ux:icon name="material-symbols:logout" width="25px" class="text-orange-500" />
                            </a>
                        </li>
+                        <li {{ stimulus_controller('hamburger') }}
+                            {{ stimulus_action('hamburger', 'toggleMenu', 'click') }}
+                            data-hamburger-navbar-outlet="#navbar"
+                            id="hamburger" class="cursor-pointer md:hidden"
+                        >
+                            <svg xmlns="http://www.w3.org/2000/svg" class="text-orange-500 ml-4" width="25px" height="25px" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M0 3.75A.75.75 0 0 1 .75 3h14.5a.75.75 0 0 1 0 1.5H.75A.75.75 0 0 1 0 3.75M0 8a.75.75 0 0 1 .75-.75h14.5a.75.75 0 0 1 0 1.5H.75A.75.75 0 0 1 0 8m.75 3.5a.75.75 0 0 0 0 1.5h14.5a.75.75 0 0 0 0-1.5z" clip-rule="evenodd"/></svg>
+                        </li>
                    </ul>
                </nav>
            </div>
--- a/templates/components/MonitorList.html.twig
+++ b/templates/components/MonitorList.html.twig
@@ -16,26 +16,26 @@
                ID
            </th>
            <th scope="col"
-                class="px-6 py-3 text-start text-xs font-medium uppercase">
+                class="hidden md:table-cell px-6 py-3 text-start text-xs font-medium uppercase">
                Search Count
            </th>
            <th scope="col"
-                class="px-6 py-3 text-start text-xs font-medium uppercase">
+                class="hidden md:table-cell px-6 py-3 text-start text-xs font-medium uppercase">
                Created at
            </th>
            <th scope="col"
-                class="px-6 py-3 text-start text-xs font-medium uppercase">
+                class="hidden md:table-cell px-6 py-3 text-start text-xs font-medium uppercase">
                Last Search Date
            </th>
            <th scope="col"
-                class="px-6 py-3 text-start text-xs font-medium uppercase">
+                class="hidden md:table-cell px-6 py-3 text-start text-xs font-medium uppercase">
                Type
            </th>
            <th scope="col"
                class="px-6 py-3 text-start text-xs font-medium uppercase">
                Status
            </th>
-            <th></th>
+            <th class="hidden md:table-cell"></th>
        </tr>
        </thead>
        <tbody id="monitors" class="divide-y divide-gray-50">
--- a/templates/components/MonitorListRow.html.twig
+++ b/templates/components/MonitorListRow.html.twig
@@ -9,16 +9,16 @@
    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
        {{ monitor|monitor_media_id }}
    </td>
-    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
+    <td class="hidden md:table-cell px-6 py-4 whitespace-nowrap text-sm text-gray-800">
        {{ monitor.searchCount }}
    </td>
-    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
+    <td class="hidden md:table-cell px-6 py-4 whitespace-nowrap text-sm text-gray-800">
        {{ monitor.createdAt|date('m/d/Y h:i a') }}
    </td>
-    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
+    <td class="hidden md:table-cell px-6 py-4 whitespace-nowrap text-sm text-gray-800">
        {{ monitor.lastSearch|date('m/d/Y h:i a') }}
    </td>
-    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
+    <td class="hidden md:table-cell px-6 py-4 whitespace-nowrap text-sm text-gray-800">
        {% if monitor.monitorType == "tvshow" %}
            <twig:StatusBadge color="blue" number="300" text="black" status="{{ monitor.monitorType|monitor_type }}" />
        {% elseif monitor.monitorType == "tvseason" %}
@@ -36,7 +36,7 @@
            <twig:StatusBadge color="green" status="{{ monitor.status }}" />
        {% endif %}
    </td>
-    <td class="px-6 py-4 flex flex-row align-middle justify-center">
+    <td class="hidden md:table-cell px-6 py-4 flex flex-row align-middle justify-center">
        {% set delete_button = component('ux:icon', {name: 'ic:twotone-cancel', width: '18px', class: 'rounded-full align-middle text-red-600' }) %}
        <twig:Modal heading="But wait!" button_text="{{ delete_button }}" submit_action="{{ stimulus_action('monitor_list', 'deleteMonitor', 'click', {id: monitor.id}) }}" show_cancel show_submit>
            Are you sure you want to delete this monitor?<br />
--- a/templates/components/NavBar.html.twig
+++ b/templates/components/NavBar.html.twig
@@ -1,4 +1,4 @@
-<nav {{ attributes }} {{ stimulus_controller('navbar') }} {{ stimulus_action('navbar', 'setActive')}} class="flex h-screen flex-col justify-between bg-cyan-950">
+<nav id="navbar" {{ attributes }} {{ stimulus_controller('navbar') }} {{ stimulus_action('navbar', 'setActive')}} class="flex h-screen flex-col justify-between bg-cyan-950 animate__animated animate__slideInLeft animate__slow">
    <div class="px-4 py-4 flex flex-col gap-12">
        <h1 class="text-3xl font-extrabold text-orange-500 mb-3">Torsearch</h1>
        <ul class="space-y-1">
--- a/templates/components/Poster.html.twig
+++ b/templates/components/Poster.html.twig
@@ -3,12 +3,12 @@
        mediaType: mediaType,
        imdbId: imdbId
    }) }}">
-        <img src="{{ image }}" class="w-40 rounded-md" />
+        <img src="{{ image }}" class="w-full md:w-40 rounded-md" />
    </a>
    <a href="{{ path('app_search_result', {
        mediaType: mediaType,
        imdbId: imdbId
    }) }}">
-        <h3 class="text-center text-gray-50 max-w-[16ch] text-extrabold">{{ title }}</h3>
+        <h3 class="text-center text-white text-xl md:text-base md:max-w-[16ch]">{{ title }}</h3>
    </a>
 </div>
--- a/templates/components/SearchResult.html.twig
+++ b/templates/components/SearchResult.html.twig
@@ -1,9 +1,9 @@
 <div{{ attributes }}>
-    <div class="p-4 flex flex-row gap-6 bg-orange-500 bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-60 rounded-md">
+    <div class="p-4 flex flex-col md:flex-row gap-6 bg-orange-500 bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-60 rounded-md">
        {% if poster != null and poster != "https://image.tmdb.org/t/p/w500" %}
-            <img class="w-24 rounded-lg" src="{{ poster }}" />
+            <img class="w-full md:w-24 rounded-lg" src="{{ poster }}" />
        {% else %}
-            <div class="w-32 h-[144px] rounded-lg bg-gray-700 flex items-center justify-center">
+            <div class="w-full md:w-32 h-[144px] rounded-lg bg-gray-700 flex items-center justify-center">
                <twig:ux:icon width="16" name="hugeicons:loading-01" />
            </div>
        {% endif %}
@@ -12,11 +12,11 @@
            <h3 class="mb-4 text-xl font-medium leading-tight font-bold text-gray-50">
                {{ title }} - {{ year }}
            </h3>
-            <p class="text-gray-50">
+            <p class="hidden md:block md:text-gray-50">
                {{ description }}
            </p>
        </div>
-        <a class="h-9 rounded-md py-1 px-2 bg-green-600 text-gray-50"
+        <a class="h-9 rounded-md py-1 px-2 bg-green-600 text-gray-50 text-center"
           href="{{ path('app_search_result', {mediaType: mediaType, imdbId: imdbId}) }}"
           >choose</a>
    </div>
--- a/templates/components/TvEpisodeList.html.twig
+++ b/templates/components/TvEpisodeList.html.twig
@@ -15,12 +15,12 @@
                        active: 'true',
                    }) }}
            >
-                <div class="p-6 flex flex-col gap-6 bg-orange-500 bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-60 rounded-md">
-                    <div class="flex flex-row gap-4">
+                <div class="p-4 md:p-6 flex flex-col gap-6 bg-orange-500 bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-60 rounded-md">
+                    <div class="flex flex-col md:flex-row gap-4">
                        {% if episode['poster'] != null %}
-                            <img class="w-64 rounded-lg" src="{{ episode['poster'] }}" />
+                            <img class="w-full md:w-64 rounded-lg" src="{{ episode['poster'] }}" />
                        {% else %}
-                            <div class="w-64 min-w-64 sticky h-[144px] rounded-lg bg-gray-700 flex items-center justify-center">
+                            <div class="w-full md:w-64 min-w-64 sticky h-[144px] rounded-lg bg-gray-700 flex items-center justify-center">
                                <twig:ux:icon width="32" name="hugeicons:loading-01" />
                            </div>
                        {% endif %}
--- a/templates/index/index.html.twig
+++ b/templates/index/index.html.twig
@@ -5,7 +5,7 @@
 {% 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-row gap-4">
+        <div class="flex flex-col md:flex-row gap-4">
            <twig:Card title="Active Downloads" class="w-full">
                <twig:DownloadList :type="'active'" />
            </twig:Card>
@@ -14,13 +14,13 @@
                <twig:DownloadList :type="'complete'" />
            </twig:Card>
        </div>
-        <div class="flex flex-row gap-4">
+        <div class="flex flex-col md:flex-row gap-4">
            <twig:Card title="Monitors" class="w-full">
                <twig:MonitorList :type="'active'" :isWidget="true" />
            </twig:Card>
        </div>
        <div class="flex flex-col gap-4">
-            <twig:Card title="Popular Movies" contentClass="flex flex-row justify-between w-full">
+            <twig:Card title="Popular Movies" contentClass="flex flex-col gap-4 md:flex-row md:justify-between w-full">
                {% for movie in popular_movies %}
                    <twig:Poster imdbId="{{ movie.imdbId }}"
                                 tmdbId="{{ movie.tmdbId }}"
@@ -32,7 +32,7 @@
                    />
                {% endfor %}
            </twig:Card>
-            <twig:Card title="Popular TV Shows" contentClass="flex flex-row justify-between w-full">
+            <twig:Card title="Popular TV Shows" contentClass="flex flex-col md:flex-row justify-between w-full">
                {% for movie in popular_tvshows %}
                    <twig:Poster imdbId="{{ movie.imdbId }}"
                                 tmdbId="{{ movie.tmdbId }}"
--- a/templates/search/result.html.twig
+++ b/templates/search/result.html.twig
@@ -7,11 +7,11 @@
        <h2 class="mb-2 text-3xl font-bold text-gray-50">Media Results</h2>
        <div class="flex flex-row w-full gap-2">
            <twig:Card title="" contentClass="flex flex-col gap-4 justify-between w-full text-gray-50">
-                <div class="p-4 flex flex-row gap-6">
+                <div class="p-2 md:p-4 flex flex-col md:flex-row gap-6">
                    {% if results.media.poster != null %}
-                        <img class="w-40 rounded-lg" src="{{ results.media.poster }}" />
+                        <img class="w-full md:w-40 rounded-lg" src="{{ results.media.poster }}" />
                    {% else %}
-                        <div class="w-40 h-[144px] rounded-lg bg-gray-700 flex items-center justify-center">
+                        <div class="w-full md:w-40 h-[144px] rounded-lg bg-gray-700 flex items-center justify-center">
                            <twig:ux:icon width="24" name="hugeicons:loading-01" />
                        </div>
                    {% endif %}
@@ -127,4 +127,20 @@
            </twig:Card>
        </div>
    </div>
+    <style>
+        html,
+        body {
+            height: 100%;
+        }
+
+        @media (min-width: 640px) {
+            thead tr:not(:first-child) {
+                display: none;
+            }
+        }
+
+        td:not(:last-child) {
+            border-bottom: 0;
+        }
+    </style>
 {% endblock %}
--- a/templates/torrentio/partial/option-table.html.twig
+++ b/templates/torrentio/partial/option-table.html.twig
@@ -1,59 +1,62 @@
-<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 {{ results.media.mediaType == "tvshows" ? "hidden" }}"
+<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 bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
-    <tr class="dark:bg-stone-600 overflow-hidden">
+    <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 border-b border-gray-500">
        <th scope="col"
-            class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+            class="px-4 py-4 leading-[20px] font-medium text-gray-900 whitespace-nowrap dark:text-white">
            Size
        </th>
        <th scope="col"
-            class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+            class="px-4 py-4 leading-[20px] font-medium text-gray-900 whitespace-nowrap dark:text-white">
            Resolution
        </th>
        <th scope="col"
-            class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+            class="px-4 py-4 leading-[20px] font-medium text-gray-900 whitespace-nowrap dark:text-white">
            Codec
        </th>
        <th scope="col"
-            class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+            class="px-4 py-4 leading-[20px] font-medium text-gray-900 whitespace-nowrap dark:text-white">
            Seeders
        </th>
        <th scope="col"
-            class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+            class="px-4 py-4 leading-[20px] font-medium text-gray-900 whitespace-nowrap dark:text-white">
            Provider
        </th>
        <th scope="col"
-            class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+            class="px-4 py-4 leading-[20px] font-medium text-gray-900 whitespace-nowrap dark:text-white">
            Language
        </th>
        <th scope="col"
-            class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+            class="px-4 py-4 leading-[32px] font-medium text-gray-900 whitespace-nowrap dark:text-white">
+            Actions
        </th>
    </tr>
+    {% endfor %}
    </thead>
-    <tbody>
+    <tbody class="flex-1 sm:flex-none">
    {% for result in results.results %}
-        <tr class="bg-white border-b dark:bg-slate-700 dark:border-gray-600 border-gray-200" 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-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
+        <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>
-            <td id="resolution" class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
+            <td id="resolution" class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
                {{ result.resolution }}
            </td>
-            <td id="codec" class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
+            <td id="codec" class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
                {{ result.codec }}
            </td>
-            <td id="seeders" class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
+            <td id="seeders" class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
                {{ result.seeders }}
            </td>
-            <td id="provider" class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50" data-provider="{{ result.provider }}">
+            <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-6 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-6 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,
--- a/templates/user/preferences.html.twig
+++ b/templates/user/preferences.html.twig
@@ -3,7 +3,7 @@
 {% block h2 %}Preferences{% endblock %}

 {% block body %}
-<div class="p-4 flex flex-row gap-2">
+<div class="p-4 flex flex-col md:flex-row gap-2">
    <twig:Card title="Media Preferences" class="w-full">
        <p class="text-gray-50 mb-2">Define a filter to be pre-applied to your download options.</p>
        <form id="media_preferences" class="flex flex-col max-w-64" name="media_preferences" method="post" action="{{ path('app_save_media_preferences') }}">
Author	SHA1	Message	Date
Brock H Caldwell	727c11e1c6	fix: makes user preferences page responsive	2025-06-30 09:16:33 -05:00
Brock H Caldwell	be65e2d4e2	fix: makes download list & monitor list responsive	2025-06-30 09:13:49 -05:00
Brock H Caldwell	497a3a74cd	fix: basic hamburger menu button	2025-06-29 23:19:16 -05:00
Brock H Caldwell	101460cd47	fix: mobile results formatting	2025-06-29 22:26:01 -05:00
Brock H Caldwell	591c9cdd2a	wip: mobile template	2025-06-29 16:01:56 -05:00
				`@@ -0,0 +1 @@`
				`<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 0 0"><path fill="currentColor" fill-rule="evenodd" d="M0 3.75A.75.75 0 0 1 .75 3h14.5a.75.75 0 0 1 0 1.5H.75A.75.75 0 0 1 0 3.75M0 8a.75.75 0 0 1 .75-.75h14.5a.75.75 0 0 1 0 1.5H.75A.75.75 0 0 1 0 8m.75 3.5a.75.75 0 0 0 0 1.5h14.5a.75.75 0 0 0 0-1.5z" clip-rule="evenodd"/></svg>`