minor #1718 [Site] Fix icons search mobile (smnandre)

This PR was merged into the 2.x branch. Discussion ---------- [Site] Fix icons search mobile Last fix for #1711 <img width="469" alt="Capture d’écran 2024-04-11 à 00 57 14" src="https://github.com/symfony/ux/assets/1359581/153ecb4f-26ac-4a7b-889f-699972a9144b"> Commits ------- 53977ae [Site] Fix icons search mobile
symfony · Apr 10, 2024 · a13900f · a13900f
2 parents df23830 + 53977ae
commit a13900f
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 14 deletions.
diff --git a/ux.symfony.com/assets/styles/components/_IconSearch.scss b/ux.symfony.com/assets/styles/components/_IconSearch.scss
@@ -3,9 +3,7 @@
 // -----------------------------------------------------------------
 
 .IconSearch {
-
 }
-
 .AppHeader.open + main .IconSearchBox {
   position: unset;
 }
@@ -25,10 +23,41 @@
 
 .IconSearch__Input {
   border: var(--bs-border-width) solid var(--bs-border-color);
-
+  border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0 !important;
   &:focus {
     border-color: var(--bs-primary);
     box-shadow: none;
     outline: revert;
   }
 }
+
+.IconSearch__Iconify {
+  position: absolute;
+  right: .75rem;
+  font-size: .7rem;
+  font-stretch: semi-condensed;
+  opacity: .5;
+  margin: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+@media screen and (max-width: 768px) {
+  .IconSearchBox fieldset {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .IconSearchBox .input-group {
+    max-width: none !important;
+  }
+  .IconSearch__Display {
+    display: none !important;
+  }
+  .IconSearch__Query {
+    order: 2;
+  }
+  .IconSearch__Iconify {
+    top: 125%;
+    font-size: xx-small;
+  }
+}
diff --git a/ux.symfony.com/templates/components/Icon/IconSearch.html.twig b/ux.symfony.com/templates/components/Icon/IconSearch.html.twig
@@ -33,19 +33,12 @@
                         class="form-control IconSearch__Input"
                         id="IconSearch-Query"
                     >
-                    <p style="
-                        position: absolute;
-                        right: .75rem;
-                        font-size: .7rem;
-                        font-stretch: semi-condensed;
-                        opacity: .5;
-                        margin: 0;
-                        top: 50%;
-                        transform: translateY(-50%);
-                    ">Powered by <a href="https://iconify.design/">iconify<span>.</span>design</a></p>
+                    <p class="IconSearch__Iconify">
+                        Powered by <a href="https://iconify.design/">iconify<span>.</span>design</a>
+                    </p>
                 </div>
 
-                <div class="d-flex flex-shrink-0">
+                <div class="d-flex flex-shrink-0 IconSearch__Display">
                     <div class="btn-group" role="group" data-controller="icon-size">
                         <button class="btn" data-action="icon-size#small">
                             <twig:Icon name="grid-small"/>