react/kiez-search-profile: fix search profile alignment

liqd · Feb 6, 2025 · b8c8488 · b8c8488
1 parent a1aa1fa
commit b8c8488
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 26 deletions.
diff --git a/meinberlin/assets/scss/components_user_facing/_control-bar.scss b/meinberlin/assets/scss/components_user_facing/_control-bar.scss
@@ -48,17 +48,6 @@
     }
 }
 
-.control-bar__bottom--projects div:last-child {
-    text-align: right;
-    margin-bottom: 1em;
-    margin-top: 1em;
-
-    @media screen and (min-width: $breakpoint-palm) {
-        margin-bottom: 0;
-        margin-top: 0;
-    }
-}
-
 .modul-facetingform .facetingform__container .control-bar__checkboxes {
     margin-bottom: 1.5em;
 }

diff --git a/meinberlin/assets/scss/components_user_facing/_search-profiles.scss b/meinberlin/assets/scss/components_user_facing/_search-profiles.scss
@@ -151,6 +151,15 @@
     margin-left: -1.25rem;
 }
 
+.save-search-profile {
+    margin-bottom: 0.9375rem;
+    text-align: right;
+
+    @media screen and (min-width: $breakpoint-palm) {
+        margin-bottom: 0;
+    }
+}
+
 .save-search-profile__action {
     color: $gray-darkest;
     line-height: 1.5rem;

diff --git a/meinberlin/react/plans/SaveSearchProfile.jsx b/meinberlin/react/plans/SaveSearchProfile.jsx
@@ -16,29 +16,37 @@ export default function SaveSearchProfile ({
 }) {
   if (!isAuthenticated) {
     return (
-      <a
-        className="save-search-profile__action save-search-profile__action--link"
-        href={
-          '/accounts/login/?next=' +
-          window.location.pathname +
-          window.location.search
-        }
-      >
-        <Icon />
-        {loginText}
-      </a>
+      <div className="save-search-profile">
+        <a
+          className="save-search-profile__action save-search-profile__action--link"
+          href={
+            '/accounts/login/?next=' +
+            window.location.pathname +
+            window.location.search
+          }
+        >
+          <Icon />
+          {loginText}
+        </a>
+      </div>
     )
   }
 
   if (searchProfile) {
     return (
-      <a className="save-search-profile__action save-search-profile__action--link" href="/account/search-profiles">
-        {viewText}
-      </a>
+      <div className="save-search-profile">
+        <a className="save-search-profile__action save-search-profile__action--link" href="/account/search-profiles">
+          {viewText}
+        </a>
+      </div>
     )
   }
 
-  return <CreateSearchProfileButton {...props} searchProfilesCount={searchProfilesCount} />
+  return (
+    <div className="save-search-profile">
+      <CreateSearchProfileButton {...props} searchProfilesCount={searchProfilesCount} />
+    </div>
+  )
 }
 
 function CreateSearchProfileButton ({