From 924928178548c1611091146425767ac329b6016b Mon Sep 17 00:00:00 2001
From: Dobromir Popov <d-popov@abv.bg>
Date: Sat, 4 May 2024 00:51:31 +0300
Subject: [PATCH] fix searchreplacemet UI on small screens

---
 components/publisher/SearchReplacement.js | 75 ++++++++++++-----------
 1 file changed, 39 insertions(+), 36 deletions(-)

diff --git a/components/publisher/SearchReplacement.js b/components/publisher/SearchReplacement.js
index 5d69bf1..9f9b545 100644
--- a/components/publisher/SearchReplacement.js
+++ b/components/publisher/SearchReplacement.js
@@ -85,43 +85,46 @@ function ConfirmationModal({ isOpen, onClose, onConfirm, subscribedPublishers, a
     return (
         <div className="fixed inset-0 flex items-center justify-center z-50">
             <div className="absolute inset-0 bg-black opacity-50" onClick={onClose}></div>
-            <div className="bg-white p-6 rounded-lg shadow-lg z-10">
+            <div className="bg-white p-6 rounded-lg shadow-lg z-10 max-h-screen overflow-y-auto">
                 <h2 className="text-lg font-semibold mb-4">Можете да изпратите заявка за заместник до следните групи:</h2>
-                <div className="mb-4">
-                    <label className="block mb-2">
-                        <div className="flex items-center mb-2">
-                            <input
-                                type="checkbox"
-                                className="mr-2 leading-tight"
-                                checked={selectedGroups.includes('subscribedPublishers')}
-                                onChange={() => handleToggleGroup('subscribedPublishers')}
-                            />
-                            <span className="text-sm font-medium">Абонирани:</span>
-                        </div>
-                        <div className="flex flex-wrap">
-                            {subscribedPublishers.map(pub => (
-                                <span key={pub.id} className="bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">{pub.name}</span>
-                            ))}
-                        </div>
-                    </label>
-                </div>
-                <div className="mb-4">
-                    <label className="block mb-2">
-                        <div className="flex items-center mb-2">
-                            <input
-                                type="checkbox"
-                                className="mr-2 leading-tight"
-                                checked={selectedGroups.includes('availablePublishers')}
-                                onChange={() => handleToggleGroup('availablePublishers')}
-                            />
-                            <span className="text-sm font-medium">На разположение :</span>
-                        </div>
-                        <div className="flex flex-wrap">
-                            {availablePublishers.map(pub => (
-                                <span key={pub.id} className="bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">{pub.name}</span>
-                            ))}
-                        </div>
-                    </label>
+                <div className="space-y-1">
+                    <div className="flex items-center mb-2">
+                        <input id="subscribedPublishersCheckbox"
+                            type="checkbox"
+                            className="mr-2 leading-tight"
+                            checked={selectedGroups.includes('subscribedPublishers')}
+                            onChange={() => handleToggleGroup('subscribedPublishers')}
+                        />
+                        <label htmlFor="subscribedPublishersCheckbox" className="text-sm font-medium">Абонирани:</label>
+                    </div>
+                    <div className="overflow-y-auto max-h-64">
+                        <label className="block mb-2">
+                            <div className="flex flex-wrap">
+                                {subscribedPublishers.map(pub => (
+                                    <span key={pub.id} className="bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">{pub.name}</span>
+                                ))}
+                            </div>
+                        </label>
+                    </div>
+                    <div className="flex items-center mb-2">
+                        <input id="availablePublishersCheckbox"
+                            type="checkbox"
+                            className="mr-2 leading-tight"
+                            checked={selectedGroups.includes('availablePublishers')}
+                            onChange={() => handleToggleGroup('availablePublishers')}
+                        />
+                        <label htmlFor="availablePublishersCheckbox" className="text-sm font-medium">На разположение :</label>
+                    </div>
+                    <div className="overflow-y-auto max-h-64">
+                        <label className="block mb-2">
+
+                            <div className="flex flex-wrap">
+                                {availablePublishers.map(pub => (
+                                    <span key={pub.id} className="bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">{pub.name}</span>
+                                ))}
+                            </div>
+                        </label>
+                    </div>
                 </div>
                 <div className="text-right">
                     <button