fix: refactor mobile search form

[ekamuktia]

Closes #444

Description

To reduce search form space, change mobile search form styling just like desktop version

Problem found: on original styling, the primary button default size is md which has class text-sm. This styling causing the keyword input and cari button have different height in mobile.

Current Tasks

• Move cari button inline with keyword input
• Change default size of Primary Button as undefined to enable text-base sm:text-sm styling so it won't affect other buttons and make keyword input & cari button have same height in mobile
• Show 2 filter items per row (2 column grid)
• Update test case

[netlify]

✔️ Deploy Preview for wargabantuwarga ready!

🔨 Explore the source changes: 1e694e6

🔍 Inspect the deploy log: https://app.netlify.com/sites/wargabantuwarga/deploys/61012a63cc9c26000817dbe8

😎 Browse the preview: https://deploy-preview-473--wargabantuwarga.netlify.app

[codecov]

Codecov Report

Merging #473 (1e694e6) into main (bf695f4) will not change coverage.
The diff coverage is 66.66%.

@@           Coverage Diff           @@
##             main     #473   +/-   ##
=======================================
  Coverage   59.87%   59.87%           
=======================================
  Files          84       84           
  Lines         967      967           
  Branches      291      291           
=======================================
  Hits          579      579           
  Misses        382      382           
  Partials        6        6           

Impacted Files	Coverage Δ
components/search-filter.tsx	87.09% <50.00%> (ø)
components/search-form.tsx	86.95% <100.00%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update bf695f4...1e694e6. Read the comment docs.

[zainfathoni]

LGTM 💯

Thanks, Mbak @ekamuktia! 🙏

[resir014]

Please check again @ekamuktia. The button sizes shouldn't be changed. In general, the forms have the same height as button with size md.

Instead of redesigning the button around the form, change the sm:text-sm class in <InputText /> into text-sm.

[resir014]

@ekamuktia Decided to fix the form styles myself so all you need to do is revert the button styling.

#474