fix(mods): fix layout broken in mobile view

This commit is contained in:
taroj1205 2025-01-31 10:59:56 +13:00
parent 9a433e9e76
commit dbaa11934c

View file

@ -142,7 +142,7 @@ export default function ModsList({ mods }: ModsListProps) {
/> />
</div> </div>
<div className="flex flex-row items-center gap-4"> <div className="grid w-full grid-cols-2 place-items-center gap-4 sm:grid-cols-3">
<div className="flex flex-col items-start gap-2"> <div className="flex flex-col items-start gap-2">
<button <button
type="button" type="button"
@ -173,15 +173,15 @@ export default function ModsList({ mods }: ModsListProps) {
</button> </button>
</div> </div>
<div className="ml-auto flex items-center gap-2"> <div className="flex items-center gap-2 px-4 py-2">
<label htmlFor="limit" className="text-sm font-semibold"> <label htmlFor="limit" className="text-md font-semibold">
Items per page: Per page:
</label> </label>
<select <select
id="limit" id="limit"
value={limit} value={limit}
onChange={handleLimitChange} onChange={handleLimitChange}
className="rounded border border-dark bg-transparent px-2 py-1 text-sm" className="rounded border border-dark bg-transparent px-2 py-1 text-sm [&>option]:text-black"
> >
<option value="12">12</option> <option value="12">12</option>
<option value="24">24</option> <option value="24">24</option>