revert change with search widget

assets/scss/partials/layout/search.scss

@@ -1,63 +1,65 @@
 .search-form {
+    margin-bottom: var(--section-separation);
     position: relative;
-    border-radius: var(--card-border-radius);
-    background-color: var(--card-background);
-    box-shadow: var(--shadow-l1);
-    color: var(--card-text-color-main);
-    width: 100%;
     --button-size: 80px;
-    display: flex;
-
-    overflow: hidden;
-    flex-direction: row;
-    justify-content: stretch;
-    gap: 0;
 
     &.widget {
         --button-size: 60px;
 
         label {
             font-size: 1.3rem;
+            top: 10px;
         }
 
         input {
             font-size: 1.5rem;
-        }
-
-        .input-wrapper {
-            padding: 10px 20px 15px 20px;
+            padding: 30px 20px 15px 20px;
         }
     }
 
-    .input-wrapper {
-        display: flex;
-        flex-direction: column;
-        flex-grow: 1;
-        gap: 5px;
-        padding: 15px 20px 20px 20px;
+    p {
+        position: relative;
+        margin: 0;
     }
 
     label {
+        position: absolute;
+        top: 15px;
+        left: 20px;
         font-size: 1.4rem;
         color: var(--card-text-color-tertiary);
     }
 
     input {
+        padding: 40px 20px 20px;
+        border-radius: var(--card-border-radius);
+        background-color: var(--card-background);
+        box-shadow: var(--shadow-l1);
+        color: var(--card-text-color-main);
+        width: 100%;
         border: 0;
         -webkit-appearance: none;
 
+        transition: box-shadow 0.3s ease;
+
         font-size: 1.8rem;
 
         &:focus {
             outline: 0;
+            box-shadow: var(--shadow-l2);
         }
     }
 
     button {
+        position: absolute;
+        right: 0;
+        top: 0;
+        height: 100%;
         width: var(--button-size);
         cursor: pointer;
         background-color: transparent;
         border: 0;
+
         padding: 0 10px;
 
         &:focus {

layouts/page/search.html

@@ -6,20 +6,18 @@
 {{ end }}
 {{ define "main" }}
 <form action="{{ .Permalink }}" class="search-form"{{ with .OutputFormats.Get "json" -}} data-json="{{ .Permalink }}"{{- end }}>
-    <div class="input-wrapper">
+    <p>
         <label>{{ T "search.title" }}</label>
         <input name="keyword" placeholder="{{ T `search.placeholder` }}" />
-    </div>
+    </p>
 
     <button title="{{ T `search.title` }}">
         {{ partial "helper/icon" "search" }}
     </button>
 </form>
 
-<div class="search-result">
-    <h3 class="search-result--title section-title"></h3>
-    <div class="search-result--list article-list--compact"></div>
-</div>
+<h3 class="search-result--title section-title"></h3>
+<div class="search-result--list article-list--compact"></div>
 
 <script>
     window.searchResultTitleTemplate = "{{ T `search.resultTitle` }}"

layouts/partials/widget/search.html

@@ -2,13 +2,14 @@
 {{- if $query -}}
     {{- $searchPage := index $query 0 -}}
     <form action="{{ $searchPage.RelPermalink }}" class="search-form widget" {{ with .OutputFormats.Get "json" -}}data-json="{{ .Permalink }}" {{- end }}>
-        <div class="input-wrapper">
+        <p>
             <label>{{ T "search.title" }}</label>
             <input name="keyword" required placeholder="{{ T `search.placeholder` }}" />
-        </div>
-        <button title="{{ T `search.title` }}">
-            {{ partial "helper/icon" "search" }}
-        </button>
+        
+            <button title="{{ T `search.title` }}">
+                {{ partial "helper/icon" "search" }}
+            </button>
+        </p>
     </form>
 {{- else -}}
     {{- warnf "Search page not found. Create a page with layout: search." -}}