From 6a3906aa9563241ee5f165193859d6e3ab0ebefe Mon Sep 17 00:00:00 2001
From: Ildar Kamalov <ik@adguard.com>
Date: Fri, 3 Nov 2023 17:11:22 +0300
Subject: [PATCH] Pull request 2056: ADG-7673 fix filters list height

Merge in DNS/adguard-home from ADG-7673 to master

Updates #6358.

Squashed commit of the following:

commit c7fc33de1e8f32c526e3820e022556227a3e2d3c
Merge: 82368de34 ffdebc7b2
Author: Eugene Burkov <E.Burkov@AdGuard.COM>
Date:   Fri Nov 3 16:52:26 2023 +0300

    Merge branch 'master' into ADG-7673

commit 82368de34afbba5ca875f7402f53e84686bf8d5d
Author: Ildar Kamalov <ik@adguard.com>
Date:   Thu Nov 2 10:07:55 2023 +0300

    changelog

commit e8514638fb87b56a5598faec049afe105dcbed25
Author: Ildar Kamalov <ik@adguard.com>
Date:   Tue Oct 31 18:31:35 2023 +0300

    ADG-7673 fix filters list height
---
 CHANGELOG.md                          | 2 ++
 client/src/components/App/index.css   | 5 +++++
 client/src/components/Filters/Form.js | 4 ++--
 client/src/components/ui/Icons.css    | 7 +++++++
 4 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index aab27268..d4ab47bf 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -30,6 +30,7 @@ NOTE: Add new changes BELOW THIS COMMENT.
 
 ### Changed
 
+- The height of ready-to-use filter lists has been increased ([#6358]).
 - Improved authentication failure logging ([#6357]).
 
 ### Fixed
@@ -46,6 +47,7 @@ NOTE: Add new changes BELOW THIS COMMENT.
 [#6335]: https://github.com/AdguardTeam/AdGuardHome/issues/6335
 [#6337]: https://github.com/AdguardTeam/AdGuardHome/issues/6337
 [#6357]: https://github.com/AdguardTeam/AdGuardHome/issues/6357
+[#6358]: https://github.com/AdguardTeam/AdGuardHome/issues/6358
 
 <!--
 NOTE: Add new changes ABOVE THIS COMMENT.
diff --git a/client/src/components/App/index.css b/client/src/components/App/index.css
index 91cd1749..a64cd488 100644
--- a/client/src/components/App/index.css
+++ b/client/src/components/App/index.css
@@ -118,6 +118,11 @@ body {
     overflow-y: auto;
 }
 
+.modal-body--filters {
+    max-height: 600px;
+    overflow-y: auto;
+}
+
 .modal-body__item:not(:first-child) {
     padding-top: 1.5rem;
 }
diff --git a/client/src/components/Filters/Form.js b/client/src/components/Filters/Form.js
index 5619580b..ee610b9f 100644
--- a/client/src/components/Filters/Form.js
+++ b/client/src/components/Filters/Form.js
@@ -28,7 +28,7 @@ const renderIcons = (iconsData) => iconsData.map(({
 }) => <a key={iconName} href={href} target="_blank" rel="noopener noreferrer"
          className={classNames('d-flex align-items-center', className)}
 >
-    <svg className="nav-icon nav-icon--gray">
+    <svg className="icon icon--15 mr-1 icon--gray">
         <use xlinkHref={`#${iconName}`} />
     </svg>
 </a>);
@@ -110,7 +110,7 @@ const Form = (props) => {
     const openAddFiltersModal = () => openModal(MODAL_TYPE.ADD_FILTERS);
 
     return <form onSubmit={handleSubmit}>
-        <div className="modal-body modal-body--medium">
+        <div className="modal-body modal-body--filters">
             {modalType === MODAL_TYPE.SELECT_MODAL_TYPE
             && <div className="d-flex justify-content-around">
                 <button onClick={openFilteringListModal}
diff --git a/client/src/components/ui/Icons.css b/client/src/components/ui/Icons.css
index 929f4725..d084e7cc 100644
--- a/client/src/components/ui/Icons.css
+++ b/client/src/components/ui/Icons.css
@@ -24,6 +24,13 @@
     height: var(--size);
 }
 
+.icon--15 {
+    --size: 0.95rem;
+
+    width: var(--size);
+    height: var(--size);
+}
+
 .icon--gray {
     color: var(--gray-a5);
 }