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

@@ -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.

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;
 }

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}

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);
 }