Unverified Commit fa7bab5e authored by Lemon-miaow's avatar Lemon-miaow
Browse files

style(panel): refine search and filter layout to align with header

parent a9dbc8bc

panel/src/pages/MyServers.tsx

+12 −8
Changes for panel/src/pages/MyServers.tsx: 12 added lines, 8 removed lines.
Original line number Diff line number Diff line
@@ -46,6 +46,7 @@ export function MyServers() { 


  return (

    <>

      <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">

        <div className="flex items-center gap-3">

          <Server className="h-6 w-6 text-primary" />

          <div>
@@ -57,17 +58,19 @@ export function MyServers() { 
        </div>



        {servers.length > 0 && cfg && (

        <div className="flex flex-col gap-3 sm:flex-row sm:items-center my-4">

          <div className="relative flex-1 max-w-md">

            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />

          <div className="flex flex-col gap-2 sm:flex-row sm:items-center w-full md:w-auto">

            <div className="relative w-full sm:w-64">

              <Search className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />

              <Input

                placeholder={t("search_placeholder")}

              className="pl-9 pr-8"

                className="h-8 pl-8 pr-8 text-sm"

                value={searchQuery}

                onChange={(e) => {

                  setSearchQuery(e.target.value);

                  setPage(1);

                }}

                autoComplete="off"

                spellCheck={false}

              />

              {searchQuery && (

                <button
@@ -76,13 +79,13 @@ export function MyServers() { 
                    setSearchQuery("");

                    setPage(1);

                  }}

                className="absolute right-2.5 top-2.5 text-muted-foreground hover:text-foreground"

                  className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"

                >

                <X className="h-4 w-4" />

                  <X className="h-3.5 w-3.5" />

                </button>

              )}

            </div>

          <div className="w-[180px]">

            <div className="w-full sm:w-36">

              <Select

                value={statusFilter}

                onValueChange={(val) => {
@@ -90,7 +93,7 @@ export function MyServers() { 
                  setPage(1);

                }}

              >

              <SelectTrigger className="w-full">

                <SelectTrigger className="h-8 text-sm">

                  <SelectValue placeholder={t("filter_status_all")} />

                </SelectTrigger>

                <SelectContent>
@@ -105,6 +108,7 @@ export function MyServers() { 
            </div>

          </div>

        )}

      </div>



      {loading && !data ? (

        <Loading />