fix(responsive): remove the 4k scale override

.github/workflows/ci.yml

@@ -79,6 +79,7 @@ jobs:
  env:
  NEXT_PUBLIC_GA_ID: "G-TEST12345"
  NEXT_PUBLIC_ENABLE_ADS: "true"
+ NEXT_PUBLIC_ADSENSE_ID: "ca-pub-0000000000000000"
  steps:
  - uses: actions/checkout@v6
 

app/globals.css

@@ -1,7 +1,3 @@
 @import "tailwindcss";
 
-@theme {
-	--breakpoint-4k: 2560px;
-}
-
 @custom-variant dark (&:where(.dark, .dark *));

app/page.tsx

@@ -62,19 +62,19 @@ export default function Home() {
  </a>
  <main className="min-h-screen bg-neutral-50 dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100 transition-colors duration-500">
  <header className="fixed top-0 left-0 right-0 z-50 bg-white/80 dark:bg-neutral-900/80 backdrop-blur-xl border-b border-neutral-200 dark:border-neutral-800">
- <div className="max-w-7xl 2xl:max-w-[1600px] 4k:max-w-[2400px] mx-auto px-6 h-20 4k:h-32 flex items-center justify-between">
- <div className="flex items-center gap-3 4k:gap-6">
- <div className="w-10 h-10 4k:w-16 4k:h-16 rounded-xl bg-indigo-500 flex items-center justify-center shadow-lg shadow-indigo-500/20">
- <Wallet className="text-white w-6 h-6 4k:w-10 4k:h-10" />
+ <div className="max-w-7xl 2xl:max-w-[1600px] mx-auto px-6 h-20 flex items-center justify-between">
+ <div className="flex items-center gap-3">
+ <div className="w-10 h-10 rounded-xl bg-indigo-500 flex items-center justify-center shadow-lg shadow-indigo-500/20">
+ <Wallet className="text-white w-6 h-6" />
  </div>
- <h1 className="text-xl font-bold tracking-tight md:text-2xl 4k:text-5xl">
+ <h1 className="text-xl font-bold tracking-tight md:text-2xl">
  WorkLoad
  </h1>
  </div>
 
  <div className="flex items-center gap-4">
- <div className="hidden md:flex items-center gap-2 px-4 py-2 bg-neutral-100 dark:bg-neutral-800 rounded-xl text-sm font-bold 4k:text-2xl 4k:px-8 4k:py-4">
- <Clock className="w-4 h-4 text-indigo-500 4k:w-8 4k:h-8" />
+ <div className="hidden md:flex items-center gap-2 px-4 py-2 bg-neutral-100 dark:bg-neutral-800 rounded-xl text-sm font-bold">
+ <Clock className="w-4 h-4 text-indigo-500" />
  <span className="tabular-nums">
  {currentTime === null
  ? PLACEHOLDER_CLOCK
@@ -94,9 +94,9 @@ export default function Home() {
  title="Alternar tema"
  >
  {resolvedTheme === "dark" ? (
- <Sun className="w-5 h-5 4k:w-10 4k:h-10" />
+ <Sun className="w-5 h-5" />
  ) : (
- <Moon className="w-5 h-5 4k:w-10 4k:h-10" />
+ <Moon className="w-5 h-5" />
  )}
  </Button>
  </div>

components/atoms/button.tsx

@@ -24,11 +24,10 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  variant === "ghost",
  "bg-red-500/10 text-red-600 hover:bg-red-500/20":
  variant === "danger",
- "h-12 px-6 py-2 text-base 4k:h-20 4k:px-12 4k:text-2xl":
- size === "default",
+ "h-12 px-6 py-2 text-base": size === "default",
  "h-9 rounded-md px-3 text-sm": size === "sm",
  "h-14 rounded-2xl px-8 text-lg": size === "lg",
- "h-10 w-10 4k:h-16 4k:w-16": size === "icon",
+ "h-10 w-10": size === "icon",
  },
  className,
  )}

components/atoms/input.tsx

@@ -18,8 +18,8 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
  <input
  type={type}
  className={cn(
- "flex h-14 4k:h-20 w-full rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white/50 dark:bg-neutral-900/50 px-4 py-2 text-lg 4k:text-2xl 4k:px-6 ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-neutral-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 disabled:cursor-not-allowed disabled:opacity-50 transition-all font-mono",
- icon ? "pl-12 4k:pl-16" : "",
+ "flex h-14 w-full rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white/50 dark:bg-neutral-900/50 px-4 py-2 text-lg ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-neutral-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 disabled:cursor-not-allowed disabled:opacity-50 transition-all font-mono",
+ icon ? "pl-12" : "",
  className,
  )}
  ref={ref}

components/atoms/label.tsx

@@ -8,7 +8,7 @@ const Label = React.forwardRef<
 	<label
  ref={ref}
  className={cn(
- "flex items-center gap-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-neutral-500 4k:text-2xl",
+ "flex items-center gap-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-neutral-500",
  className,
  )}
  {...props}

components/molecules/copy-button.tsx

@@ -50,29 +50,20 @@ export function CopyButton({ value, label, onCopied }: CopyButtonProps) {
 
 	return (
  <div className="flex items-center gap-3">
- <span
- role="status"
- className="text-xs font-bold text-right 4k:text-xl empty:hidden"
- >
+ <span role="status" className="text-xs font-bold text-right empty:hidden">
  {STATUS_MESSAGES[status]}
  </span>
  <button
  type="button"
  aria-label={label}
  title={label}
  onClick={handleCopy}
- className="p-4 lg:p-2 bg-white/10 hover:bg-white/20 rounded-2xl lg:rounded-lg transition-colors active:scale-95 4k:p-4 4k:rounded-xl"
+ className="p-4 lg:p-2 bg-white/10 hover:bg-white/20 rounded-2xl lg:rounded-lg transition-colors active:scale-95"
  >
  {status === "copied" ? (
- <Check
- className="w-6 h-6 lg:w-5 lg:h-5 4k:w-10 4k:h-10"
- aria-hidden="true"
- />
+ <Check className="w-6 h-6 lg:w-5 lg:h-5" aria-hidden="true" />
  ) : (
- <Copy
- className="w-6 h-6 lg:w-5 lg:h-5 4k:w-10 4k:h-10"
- aria-hidden="true"
- />
+ <Copy className="w-6 h-6 lg:w-5 lg:h-5" aria-hidden="true" />
  )}
  </button>
  </div>

components/molecules/date-time-input.tsx

@@ -10,7 +10,7 @@ const TIME_GROUPS = [2, 2] as const;
 const BR_DATE_FORMAT = "dd/MM/yyyy";
 const ISO_DATE_FORMAT = "yyyy-MM-dd";
 const FIELD_CLASSES =
-	"h-14 4k:h-20 focus-visible:ring-indigo-500 placeholder:text-neutral-500";
+	"h-14 focus-visible:ring-indigo-500 placeholder:text-neutral-500";
 
 const toBRDate = (isoDate: string) => {
 	if (!isoDate) return "";
@@ -67,9 +67,9 @@ export function DateTimeInput({
  <div className={cn("space-y-3", className)}>
  <label
  htmlFor={inputId}
- className="flex items-center gap-2 text-sm font-medium text-neutral-500 4k:text-2xl"
+ className="flex items-center gap-2 text-sm font-medium text-neutral-500"
  >
- <Icon className="w-4 h-4 4k:w-8 4k:h-8" aria-hidden="true" />
+ <Icon className="w-4 h-4" aria-hidden="true" />
  {label}
  </label>
  <div className="flex flex-col sm:flex-row gap-3 sm:gap-2">
@@ -85,7 +85,7 @@ export function DateTimeInput({
  className={FIELD_CLASSES}
  />
  </div>
- <div className="w-full sm:w-32 4k:w-48 shrink-0">
+ <div className="w-full sm:w-32 shrink-0">
  <MaskedInput
  placeholder="HH:mm"
  aria-label={`Hora para ${label}`}

components/molecules/duration-row.tsx

@@ -24,16 +24,11 @@ export function DurationRow({
 }: DurationRowProps) {
 	return (
  <div className="flex items-center justify-between">
- <div className="flex items-center gap-2 text-sm text-neutral-500 4k:text-2xl">
- <Icon
- className={cn("w-4 h-4 4k:w-8 4k:h-8", iconClassName)}
- aria-hidden="true"
- />
+ <div className="flex items-center gap-2 text-sm text-neutral-500">
+ <Icon className={cn("w-4 h-4", iconClassName)} aria-hidden="true" />
  {label}
  </div>
- <span className="font-bold 4k:text-3xl">
- {formatHoursAndMinutes(minutes)}
- </span>
+ <span className="font-bold">{formatHoursAndMinutes(minutes)}</span>
  </div>
 	);
 }

components/molecules/extra-entry-list.tsx

@@ -25,9 +25,7 @@ export function ExtraEntryList({
 	return (
  <div>
  <div className="flex items-center justify-between mb-4">
- <p className="text-sm font-medium text-neutral-500 4k:text-2xl">
- {label}
- </p>
+ <p className="text-sm font-medium text-neutral-500">{label}</p>
  <Button
  variant="outline"
  size="sm"

components/molecules/extra-entry-row.tsx

@@ -5,7 +5,7 @@ import { formatCurrencySimple, parseCurrency } from "@/lib/utils";
 import { Button } from "../atoms/button";
 import { Input } from "../atoms/input";
 
-const COMPACT_FIELD_CLASSES = "h-12 4k:h-16 rounded-xl text-sm 4k:text-xl";
+const COMPACT_FIELD_CLASSES = "h-12 rounded-xl text-sm";
 
 interface ExtraEntryRowProps {
 	name: string;
@@ -42,7 +42,7 @@ export function ExtraEntryRow({
  className={COMPACT_FIELD_CLASSES}
  />
  </div>
- <div className="w-24 sm:w-32 4k:w-48 shrink-0">
+ <div className="w-24 sm:w-32 shrink-0">
  <Input
  type="text"
  inputMode="numeric"
@@ -61,7 +61,7 @@ export function ExtraEntryRow({
  onClick={onRemove}
  className="shrink-0"
  >
- <Trash2 className="w-4 h-4 4k:w-8 4k:h-8" aria-hidden="true" />
+ <Trash2 className="w-4 h-4" aria-hidden="true" />
  </Button>
  </div>
 	);

components/molecules/hero-panel.tsx

@@ -29,35 +29,30 @@ export function HeroPanel({
 	return (
  <div
  className={cn(
- "relative overflow-hidden rounded-3xl p-8 lg:p-12 4k:p-24 4k:rounded-[4rem] text-white shadow-xl lg:shadow-2xl transition-colors duration-700",
+ "relative overflow-hidden rounded-3xl p-8 lg:p-12 text-white shadow-xl lg:shadow-2xl transition-colors duration-700",
  TONE_CLASSES[tone],
  )}
  >
- <div className="absolute -top-10 -right-10 w-32 h-32 lg:w-40 lg:h-40 4k:w-80 4k:h-80 bg-white/10 rounded-full blur-2xl lg:blur-3xl" />
- <div className="absolute -bottom-10 -left-10 w-40 h-40 4k:w-80 4k:h-80 bg-black/10 rounded-full blur-3xl" />
- <div className="relative z-10 space-y-6 lg:space-y-8 4k:space-y-16">
+ <div className="absolute -top-10 -right-10 w-32 h-32 lg:w-40 lg:h-40 bg-white/10 rounded-full blur-2xl lg:blur-3xl" />
+ <div className="absolute -bottom-10 -left-10 w-40 h-40 bg-black/10 rounded-full blur-3xl" />
+ <div className="relative z-10 space-y-6 lg:space-y-8">
  <div className="flex items-center justify-between gap-4">
- <div className="flex items-center gap-2 lg:gap-3 4k:gap-6 opacity-80">
- <Icon
- className="w-5 h-5 lg:w-6 lg:h-6 4k:w-12 4k:h-12"
- aria-hidden="true"
- />
- <span className="text-sm lg:text-lg font-bold lg:font-medium tracking-wider lg:tracking-wide uppercase 4k:text-4xl">
+ <div className="flex items-center gap-2 lg:gap-3 opacity-80">
+ <Icon className="w-5 h-5 lg:w-6 lg:h-6" aria-hidden="true" />
+ <span className="text-sm lg:text-lg font-bold lg:font-medium tracking-wider lg:tracking-wide uppercase">
  {label}
  </span>
  </div>
  {badge}
  </div>
- <div className="space-y-4 4k:space-y-8 text-center">
- <p className="text-4xl sm:text-6xl xl:text-8xl font-black tracking-tighter tabular-nums 4k:text-[14rem] break-words">
+ <div className="space-y-4 text-center">
+ <p className="text-4xl sm:text-6xl xl:text-8xl font-black tracking-tighter tabular-nums break-words">
  {value}
  </p>
  {children}
  </div>
  {footer ? (
- <div className="pt-6 lg:pt-8 4k:pt-16 border-t border-white/10">
- {footer}
- </div>
+ <div className="pt-6 lg:pt-8 border-t border-white/10">{footer}</div>
  ) : null}
  </div>
  </div>

components/molecules/stat-box.tsx

@@ -21,7 +21,7 @@ export function StatBox({
 	return (
  <div
  className={cn(
- "rounded-2xl border p-4 4k:p-8 flex flex-col gap-1 4k:gap-2",
+ "rounded-2xl border p-4 flex flex-col gap-1",
  {
  "bg-blue-50/50 border-blue-100 dark:bg-blue-900/10 dark:border-blue-800":
  variant === "default",
@@ -38,14 +38,14 @@ export function StatBox({
  )}
  {...props}
  >
- <div className="flex items-center gap-2 text-sm 4k:text-2xl opacity-70 mb-1">
+ <div className="flex items-center gap-2 text-sm opacity-70 mb-1">
  {icon}
- <span className="font-medium uppercase tracking-wider text-xs 4k:text-xl">
+ <span className="font-medium uppercase tracking-wider text-xs">
  {label}
  </span>
  </div>
  <div
- className={cn("text-2xl 4k:text-5xl font-bold tracking-tight", {
+ className={cn("text-2xl font-bold tracking-tight", {
  "text-blue-600 dark:text-blue-400": variant === "default",
  "text-emerald-600 dark:text-emerald-400": variant === "success",
  "text-amber-600 dark:text-amber-400": variant === "warning",
@@ -56,9 +56,7 @@ export function StatBox({
  {value}
  </div>
  {subValue && (
- <div className="text-sm 4k:text-xl font-medium opacity-60 mt-1">
- {subValue}
- </div>
+ <div className="text-sm font-medium opacity-60 mt-1">{subValue}</div>
  )}
  </div>
 	);