fixed for tailwindcss style and some refactor

Author: rabbitson87

frontend/src/components/FloatingActionBar.tsx

@@ -78,7 +78,7 @@ export const FloatingActionBar = ({
               value={selectedAction}
               onValueChange={(v) => setSelectedAction(v as BulkAction)}
             >
-              <SelectTrigger className="w-[100px] h-10">
+              <SelectTrigger className="w-25 h-10">
                 <SelectValue />
               </SelectTrigger>
               <SelectContent>

frontend/src/components/Header.tsx

@@ -47,7 +47,7 @@ export function Header({
             </div>
 
             <div className="flex min-w-0 flex-wrap items-center gap-2.5">
-              <h2 className="min-w-0 break-words text-xl leading-none font-extrabold tracking-tight text-foreground sm:text-2xl">
+              <h2 className="min-w-0 wrap-break-word text-xl leading-none font-extrabold tracking-tight text-foreground sm:text-2xl">
                 {title}
               </h2>
               {releaseVersion && (
@@ -118,7 +118,7 @@ export function Header({
                   className="h-12 w-12 cursor-pointer rounded-full border-border/70 bg-background/90 text-foreground shadow-sm transition-all hover:-translate-y-0.5 hover:border-destructive/40 hover:bg-background hover:text-destructive"
                   aria-label="Logout"
                 >
-                  <LogOut className="h-[22px] w-[22px]" />
+                  <LogOut className="h-5.5 w-5.5" />
                 </Button>
               </TooltipTrigger>
               <TooltipContent>

frontend/src/components/LandingHero.tsx

@@ -287,7 +287,7 @@ export function LandingHero() {
         className="pointer-events-none absolute inset-0"
       >
         <div
-          className="absolute inset-0 opacity-45 [background-size:14px_14px] [mask-image:linear-gradient(to_bottom,white,transparent_82%)]"
+          className="absolute inset-0 opacity-45 bg-size-[14px_14px] mask-[linear-gradient(to_bottom,white,transparent_82%)]"
           style={{
             backgroundImage:
               "radial-gradient(var(--hero-grid-dot) 0.8px, transparent 0.8px)",
@@ -327,10 +327,10 @@ export function LandingHero() {
             <div className="pointer-events-none absolute inset-x-0 top-6 flex justify-center sm:top-8">
               <div className="h-28 w-28 rounded-full bg-primary/16 blur-3xl dark:bg-primary/22" />
             </div>
-            <div className="pointer-events-none absolute inset-y-0 left-0 z-40 w-12 bg-gradient-to-r from-background via-background/74 to-transparent dark:from-background dark:via-background/60 sm:w-24" />
-            <div className="pointer-events-none absolute inset-y-0 right-0 z-40 w-12 bg-gradient-to-l from-background via-background/74 to-transparent dark:from-background dark:via-background/60 sm:w-24" />
+            <div className="pointer-events-none absolute inset-y-0 left-0 z-40 w-12 bg-linear-to-r from-background via-background/74 to-transparent dark:from-background dark:via-background/60 sm:w-24" />
+            <div className="pointer-events-none absolute inset-y-0 right-0 z-40 w-12 bg-linear-to-l from-background via-background/74 to-transparent dark:from-background dark:via-background/60 sm:w-24" />
 
-            <div className="relative h-[328px] sm:h-[360px]">
+            <div className="relative h-82 sm:h-90">
               <div
                 onPointerDown={handlePointerDown}
                 onPointerMove={handlePointerMove}
@@ -353,12 +353,12 @@ export function LandingHero() {
                   return (
                     <article
                       key={`${card.key}-${index}`}
-                      className={`relative h-[244px] shrink-0 overflow-hidden rounded-[1.65rem] border px-5 py-5 text-left transition-[opacity,transform,box-shadow] duration-700 ease-[cubic-bezier(0.22,1,0.36,1)] sm:h-[268px] sm:px-7 sm:py-6 ${
+                      className={`relative h-61 shrink-0 overflow-hidden rounded-[1.65rem] border px-5 py-5 text-left transition-[opacity,transform,box-shadow] duration-700 ease-[cubic-bezier(0.22,1,0.36,1)] sm:h-67 sm:px-7 sm:py-6 ${
                         isActive
-                          ? "border-primary/24 bg-white/92 opacity-100 shadow-[0_24px_54px_rgba(15,23,42,0.08)] dark:bg-white/[0.08] dark:shadow-[0_26px_60px_rgba(0,0,0,0.22)]"
+                          ? "border-primary/24 bg-white/92 opacity-100 shadow-[0_24px_54px_rgba(15,23,42,0.08)] dark:bg-white/8 dark:shadow-[0_26px_60px_rgba(0,0,0,0.22)]"
                           : distance === 1
-                            ? "border-border/70 bg-background/78 opacity-62 shadow-[0_14px_32px_rgba(15,23,42,0.04)] dark:bg-white/[0.04]"
-                            : "border-border/60 bg-background/70 opacity-30 shadow-none dark:bg-white/[0.03]"
+                            ? "border-border/70 bg-background/78 opacity-62 shadow-[0_14px_32px_rgba(15,23,42,0.04)] dark:bg-white/4"
+                            : "border-border/60 bg-background/70 opacity-30 shadow-none dark:bg-white/3"
                       } ${isActive ? "translate-y-0 scale-100" : "translate-y-5 scale-[0.95]"}`}
                       style={{ width: `${slideSize}px` }}
                       aria-hidden={!isActive}
@@ -379,7 +379,7 @@ export function LandingHero() {
                           </p>
                         </div>
                         <div className="mt-auto pt-8">
-                          <div className="h-px w-16 bg-gradient-to-r from-primary/55 to-transparent" />
+                          <div className="h-px w-16 bg-linear-to-r from-primary/55 to-transparent" />
                         </div>
                       </div>
                     </article>
@@ -394,7 +394,7 @@ export function LandingHero() {
       <div className="relative -mx-4 w-auto sm:-mx-6 md:-mx-8">
         <div className="overflow-hidden border-t border-border/80 bg-border/70">
           <div className="grid gap-px sm:grid-cols-2 lg:grid-cols-3">
-            <div className="flex min-h-[184px] bg-background/88 p-6 text-left sm:min-h-[196px] sm:p-7">
+            <div className="flex min-h-46 bg-background/88 p-6 text-left sm:min-h-49 sm:p-7">
               <div className="space-y-2">
                 <p className="text-sm font-semibold uppercase tracking-[0.3em] text-primary">
                   Core features
@@ -411,7 +411,7 @@ export function LandingHero() {
             {heroFeatures.map(({ title, description }) => (
               <article
                 key={title}
-                className="flex min-h-[184px] bg-background/88 p-6 text-left transition-colors duration-200 hover:bg-background/92 sm:min-h-[196px] sm:p-7"
+                className="flex min-h-46 bg-background/88 p-6 text-left transition-colors duration-200 hover:bg-background/92 sm:min-h-49 sm:p-7"
               >
                 <div className="space-y-2">
                   <h3 className="whitespace-nowrap text-[1.2rem] font-semibold tracking-tight text-foreground sm:text-[1.32rem] sm:leading-none">
@@ -439,7 +439,7 @@ export function LandingHero() {
           </div>
 
           <div
-            className="relative mx-auto mt-4 w-full max-w-[520px] rounded-[1.75rem] border px-4 py-5 sm:px-5 sm:py-6"
+            className="relative mx-auto mt-4 w-full max-w-130 rounded-xl border px-4 py-5 sm:px-5 sm:py-6"
             style={{
               background: "var(--hero-terminal-bg)",
               borderColor: "var(--hero-terminal-border)",

frontend/src/components/SearchBar.tsx

@@ -38,7 +38,7 @@ export function SearchBar({
   return (
     <div className="flex flex-wrap mt-4 sm:mt-6 items-center gap-3 px-4 sm:px-6">
       <div className="flex gap-2 items-center w-full">
-        <label className="flex min-w-[220px] flex-1 items-stretch h-10 relative">
+        <label className="flex min-w-55 flex-1 items-stretch h-10 relative">
           <div className="left-0 h-full absolute text-text-muted flex items-center justify-center pl-3 pr-2 rounded-l-md bg-border border border-border">
             <Search className="w-4 h-4" />
           </div>

frontend/src/components/ServerCard.tsx

@@ -226,8 +226,8 @@ export function ServerCard({
     <article
       data-hero-key={`server-bg-${serverId}`}
       className={clsx(
-        "group flex h-full flex-col overflow-hidden rounded-[1.75rem] border border-border bg-card shadow-[0_18px_42px_oklch(0%_0_0_/_0.06)] transition-transform duration-200 hover:-translate-y-1 hover:shadow-[0_24px_56px_oklch(0%_0_0_/_0.08)]",
-        showAdminControls ? "min-h-[360px]" : "min-h-[310px]"
+        "group flex h-full flex-col overflow-hidden rounded-xl border border-border bg-card shadow-[0_18px_42px_oklch(0%_0_0/0.06)] transition-transform duration-200 hover:-translate-y-1 hover:shadow-[0_24px_56px_oklch(0%_0_0/0.08)]",
+        showAdminControls ? "min-h-90" : "min-h-77.5"
       )}
     >
       <div
@@ -248,7 +248,7 @@ export function ServerCard({
         )}
 
         <div className="absolute inset-x-0 top-0 flex items-start justify-between p-4">
-          <div className="inline-flex items-center gap-2 rounded-full border border-border bg-card/95 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-foreground shadow-[0_8px_18px_oklch(0%_0_0_/_0.05)]">
+          <div className="inline-flex items-center gap-2 rounded-full border border-border bg-card/95 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-foreground shadow-[0_8px_18px_oklch(0%_0_0/0.05)]">
             <span
               className={clsx(
                 "h-2.5 w-2.5 rounded-full",
@@ -270,7 +270,7 @@ export function ServerCard({
             <button
               onClick={handleSelectClick}
               className={clsx(
-                "flex size-9 items-center justify-center rounded-full border border-border bg-card/95 text-text-muted shadow-[0_8px_18px_oklch(0%_0_0_/_0.05)] transition-colors cursor-pointer",
+                "flex size-9 items-center justify-center rounded-full border border-border bg-card/95 text-text-muted shadow-[0_8px_18px_oklch(0%_0_0/0.05)] transition-colors cursor-pointer",
                 isSelected
                   ? "bg-primary text-primary-foreground"
                   : "hover:text-foreground"
@@ -280,7 +280,7 @@ export function ServerCard({
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
-                className="h-[18px] w-[18px]"
+                className="h-4.5 w-4.5"
                 fill="none"
                 stroke="currentColor"
                 strokeWidth="3"
@@ -294,7 +294,7 @@ export function ServerCard({
             <button
               onClick={handleFavoriteClick}
               className={clsx(
-                "flex size-9 items-center justify-center rounded-full border border-border bg-card/95 text-text-muted shadow-[0_8px_18px_oklch(0%_0_0_/_0.05)] transition-colors cursor-pointer",
+                "flex size-9 items-center justify-center rounded-full border border-border bg-card/95 text-text-muted shadow-[0_8px_18px_oklch(0%_0_0/0.05)] transition-colors cursor-pointer",
                 isFavorite
                   ? "bg-primary text-primary-foreground"
                   : "hover:text-foreground"
@@ -306,7 +306,7 @@ export function ServerCard({
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
-                className="h-[18px] w-[18px]"
+                className="h-4.5 w-4.5"
                 fill={isFavorite ? "currentColor" : "none"}
                 stroke="currentColor"
                 strokeWidth="2"
@@ -359,7 +359,7 @@ export function ServerCard({
         </div>
 
         {showAdminControls && leaseId && (
-          <div className="flex flex-col gap-3 rounded-[1.5rem] border border-border bg-secondary/70 p-4">
+          <div className="flex flex-col gap-3 rounded-3xl border border-border bg-secondary/70 p-4">
             {onBPSChange && (
               <div className="flex items-center justify-between gap-4">
                 <span className="text-xs text-text-muted">

frontend/src/components/ServerListView.tsx

@@ -634,7 +634,7 @@ export function ServerListView({
           </>
         ) : (
           <>
-            <div className="sticky top-0 z-20 w-full bg-background/95 py-5 backdrop-blur supports-[backdrop-filter]:bg-background/80">
+            <div className="sticky top-0 z-20 w-full bg-background/95 py-5 backdrop-blur supports-backdrop-filter:bg-background/80">
               <div className="flex w-full flex-col px-6 sm:px-8 lg:px-10">
                 <Header
                   title={title}
@@ -655,7 +655,7 @@ export function ServerListView({
                 <section
                   id="live-servers"
                   aria-labelledby="live-servers-title"
-                  className="scroll-mt-24 min-h-[34rem] border-b border-border/80 px-4 py-8 sm:min-h-[36rem] sm:px-6 md:px-8"
+                  className="scroll-mt-24 min-h-136 border-b border-border/80 px-4 py-8 sm:min-h-144 sm:px-6 md:px-8"
                 >
                   <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
                     <div className="space-y-2">
@@ -681,7 +681,7 @@ export function ServerListView({
                       {serverGrid}
                     </div>
                   ) : (
-                    <div className="mt-6 flex min-h-[22rem] flex-col">
+                    <div className="mt-6 flex min-h-88 flex-col">
                       {searchBar}
                       <div className="px-1 pt-3 text-sm text-text-muted">
                         0 services visible
@@ -720,7 +720,7 @@ export function ServerListView({
                     </a>
                   </div>
 
-                  <div className="mt-6 rounded-[1.75rem] border border-border/80 bg-secondary/35 p-5 sm:p-6">
+                  <div className="mt-6 rounded-xl border border-border/80 bg-secondary/35 p-5 sm:p-6">
                     {officialRegistryRelays === null ? (
                       <p className="text-sm text-text-muted">
                         Loading official registry...

frontend/src/components/TagCombobox.tsx

@@ -125,7 +125,7 @@ export function TagCombobox({
             onBlur={handleBlur}
             onKeyDown={handleKeyDown}
             placeholder="Add tag…"
-            className="min-w-[120px] flex-1 bg-transparent text-sm outline-none placeholder:text-text-muted"
+            className="min-w-30 flex-1 bg-transparent text-sm outline-none placeholder:text-text-muted"
             role="combobox"
             aria-expanded={open}
             aria-controls={listId}

frontend/src/components/ThemeToggleButton.tsx

@@ -25,9 +25,9 @@ export function ThemeToggleButton({ className }: ThemeToggleButtonProps) {
       title={theme === "dark" ? "Light theme" : "Dark theme"}
     >
       {theme === "dark" ? (
-        <Sun className="h-[22px] w-[22px]" />
+        <Sun className="h-5.5 w-5.5" />
       ) : (
-        <Moon className="h-[22px] w-[22px]" />
+        <Moon className="h-5.5 w-5.5" />
       )}
     </Button>
   );