ADG-7673 fix filters list height

AdguardTeam · Oct 31, 2023 · e851463 · e851463
1 parent 62ec0d5
commit e851463
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -30,6 +30,7 @@ NOTE: Add new changes BELOW THIS COMMENT.
 
 ### Fixed
 
+- Issue with filters list height ([#6358]).
 - `$important,dnsrewrite` rules do not take precedence over allowlist rules
   ([#6204]).
 - Dark mode DNS rewrite background ([#6329]).
@@ -39,6 +40,7 @@ NOTE: Add new changes BELOW THIS COMMENT.
 [#6204]: https://github.com/AdguardTeam/AdGuardHome/issues/6204
 [#6329]: https://github.com/AdguardTeam/AdGuardHome/issues/6329
 [#6335]: https://github.com/AdguardTeam/AdGuardHome/issues/6335
+[#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
@@ -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
@@ -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
@@ -24,6 +24,13 @@
     height: var(--size);
 }
 
+.icon--15 {
+    --size: 0.95rem;
+
+    width: var(--size);
+    height: var(--size);
+}
+
 .icon--gray {
     color: var(--gray-a5);
 }