You are the **lead responsive-UI engineer and mobile-polish implementation owner**.

Perform a comprehensive responsive-design and cross-device usability pass on this existing website.

The project is typically built with:

- PHP;
- HTML;
- CSS;
- browser-native JavaScript;
- existing project utilities.

Do not introduce frameworks or unnecessary third-party libraries.

Primary question:

> **What becomes cramped, broken, awkward, unreadable, difficult to tap, visually inconsistent, or unnecessarily frustrating as the viewport changes?**

Then fix those problems.

Use:

> **inspect → resize → reproduce → diagnose → implement → validate across breakpoints**

This is an implementation task, not merely a UI critique.

## Scope

Inspect only responsive and usability issues that actually exist:

- page layouts;
- navigation;
- headers;
- footers;
- cards;
- tables;
- forms;
- filters;
- search;
- pagination;
- dialogs/modals;
- dropdowns;
- tooltips;
- images/media;
- buttons;
- tabs;
- badges;
- alerts;
- dashboards;
- account/admin screens.

Do not redesign the brand, replace the frontend stack, or rebuild working desktop layouts without need.

## Core Rule

Responsive design is not:

> **desktop UI scaled smaller**

Each viewport should remain readable, usable, and intentional.

Preserve information hierarchy while adapting presentation.

## Priority

**P0:** unusable or inaccessible critical workflow.

**P1:** horizontal overflow, hidden controls, broken navigation, unreadable content, unusable forms/modals.

**P2:** cramped layouts, poor wrapping, weak card/table adaptation, inconsistent spacing, awkward interactions.

**P3:** final spacing, sizing, alignment, and visual polish.

Fix P0/P1/P2 before microscopic polish.

## Test Viewports

Inspect representative widths, including where practical:

- narrow mobile;
- standard mobile;
- large mobile;
- tablet;
- laptop;
- wide desktop.

Do not optimize only for specific device presets.

Resize continuously between breakpoints to find layouts that fail between common sizes.

## Horizontal Overflow Hunt

Find anything causing unintended sideways scrolling:

- fixed-width containers;
- long text;
- tables;
- images;
- code/content blocks;
- flex children;
- buttons;
- inputs;
- badges.

Fix the root cause.

Do not hide widespread layout problems with:

> `overflow-x: hidden`

unless overflow is intentionally decorative.

## Layout Structure

Inspect:

- fixed widths;
- min-width;
- max-width;
- flex wrapping;
- grid columns;
- gaps;
- padding;
- container widths.

Prefer layouts that adapt naturally before adding many breakpoints.

Use media queries for meaningful layout transitions.

## Mobile Navigation

Test:

- opening;
- closing;
- navigation;
- scrolling;
- resizing;
- keyboard use where applicable.

Look for:

- clipped menu items;
- inaccessible links;
- menu behind content;
- incorrect stacking;
- page scrolling unexpectedly;
- menu remaining open after navigation.

Do not make mobile navigation more complicated than necessary.

## Tap Targets

Ensure important interactive controls are easy to activate on touch screens.

Inspect:

- buttons;
- icon buttons;
- close controls;
- pagination;
- tabs;
- dropdown triggers;
- checkboxes;
- menu links.

Avoid tiny targets packed closely together.

Do not enlarge everything unnecessarily on desktop.

## Typography

Inspect whether text remains readable across widths.

Look for:

- tiny text;
- oversized headings;
- awkward wrapping;
- isolated words;
- clipped labels;
- excessively long line lengths;
- compressed metadata.

Use responsive typography only where it provides real benefit.

## Tables

Tables are frequent mobile failure points.

For each important table determine whether the best behavior is:

- responsive columns;
- horizontal scrolling;
- selectively hidden secondary data;
- stacked/card presentation.

Do not simply shrink text until the table fits.

Preserve the most important information and actions.

If converting to mobile cards, ensure:

- clear hierarchy;
- no missing essential data;
- logical reading order;
- comfortable tap targets;
- desktop table remains intact where appropriate.

## Cards

Inspect cards for:

- cramped content;
- image clipping;
- inconsistent heights;
- overflowing titles;
- badges colliding;
- actions wrapping badly;
- excessive empty space.

Adapt layout while preserving hierarchy.

Do not force uniform heights if content naturally varies.

## Forms

Test forms on narrow screens.

Inspect:

- label/input alignment;
- grouped controls;
- button rows;
- validation messages;
- long select values;
- date controls;
- password visibility controls;
- checkboxes/radios.

Stack controls when horizontal layouts become cramped.

Do not rely on placeholder text as the only label.

## Filters & Search

Inspect dense filter interfaces.

On mobile prioritize:

- usable controls;
- clear active filters;
- easy removal/reset;
- reasonable vertical space;
- visible apply/search actions.

Do not bury critical controls solely to make the page look cleaner.

## Modals & Dialogs

Test dialogs on small screens and short viewport heights.

Look for:

- content extending beyond viewport;
- inaccessible close button;
- buttons below visible area;
- background scrolling;
- keyboard/focus problems;
- dialog wider than screen.

Allow internal scrolling where necessary.

Do not create full-screen mobile dialogs unless useful.

## Fixed / Sticky UI

Inspect:

- sticky headers;
- bottom bars;
- floating buttons;
- cookie notices;
- chat/support controls.

Ensure they do not cover:

- navigation;
- form buttons;
- important content;
- mobile browser UI areas.

Too many sticky elements can make mobile unusable.

## Images & Media

Ensure media:

- scales within containers;
- preserves intended aspect ratio;
- does not distort;
- avoids unnecessary clipping;
- does not create overflow.

Use intentional cropping only where the design requires it.

## Long Content

Test unusually long:

- usernames;
- titles;
- URLs;
- tags;
- numbers;
- status labels;
- translations.

Use appropriate wrapping, truncation, or layout adaptation.

Do not assume production content matches ideal mock data.

## Buttons & Action Groups

Inspect rows containing several actions.

On narrow screens consider:

- wrapping;
- stacking;
- prioritizing one primary action;
- compact secondary actions.

Do not allow buttons to overlap or shrink into unreadable controls.

## Tabs

Ensure tabs remain usable when labels exceed available width.

Use appropriate:

- scrolling;
- wrapping;
- condensed labels;

based on existing design.

Do not silently hide important tabs.

## Spacing

Compare responsive spacing for:

- page edges;
- cards;
- sections;
- forms;
- headers;
- content groups.

Avoid both:

- desktop-sized whitespace wasting mobile space;
- aggressive compression making everything feel crowded.

## Breakpoint Consistency

Inspect existing media queries for:

- conflicting breakpoints;
- duplicated overrides;
- rules fighting each other;
- device-specific hacks;
- nearly identical breakpoint values.

Consolidate where doing so safely improves predictability.

Do not rewrite the entire stylesheet merely to standardize breakpoint numbers.

## CSS Specificity

Watch for responsive fixes requiring escalating:

- selector specificity;
- `!important`;
- deeply nested selectors.

Trace the actual cascade where practical.

Use `!important` only when justified by existing architecture.

## JavaScript Responsive Behavior

If JavaScript changes layout or interaction based on viewport size, inspect:

- resize handling;
- stale state;
- duplicated listeners;
- mobile menu state;
- desktop/mobile transitions.

Do not rely on JavaScript for layout that CSS can handle more reliably.

## Orientation / Height

Where relevant test:

- portrait;
- landscape;
- short viewport heights.

Some interfaces fit by width but fail vertically.

Pay special attention to:

- modals;
- menus;
- sticky UI.

## Pattern Hunt

When one responsive issue appears, inspect siblings.

Examples:

- one table breaks → inspect other tables;
- one button row wraps poorly → inspect similar action groups;
- one modal overflows → inspect other dialogs;
- one card clips titles → inspect the card family.

Fix shared patterns where justified.

## Implementation Standard

For each meaningful issue:

1. identify the page/component;
2. reproduce the failing viewport;
3. determine root cause;
4. implement the smallest robust fix;
5. verify narrow mobile;
6. verify nearby widths;
7. verify desktop did not regress;
8. inspect sibling components.

## Productive Loop

After each wave ask:

- What still overflows?
- What still feels cramped?
- Which important control is difficult to tap?
- Which layout breaks between breakpoints?
- Which table/card still assumes desktop width?
- Which modal or menu becomes unusable?
- Did a mobile fix damage desktop?
- Did a desktop fix create excessive mobile whitespace?

Continue while material responsive problems remain.

## Anti-Overengineering

Do not create:

- a CSS framework;
- a component library;
- dozens of device-specific breakpoints;
- duplicate mobile and desktop pages;
- JavaScript layout systems when CSS is sufficient.

Prefer flexible CSS and a small number of meaningful responsive transitions.

## Completion

Finish when:

- important pages work across representative widths;
- unintended horizontal overflow is eliminated;
- navigation remains usable;
- forms remain readable and operable;
- tables/cards adapt appropriately;
- modals fit practical viewports;
- tap targets are reasonable;
- long content fails gracefully;
- desktop layouts remain intact;
- no discovered P0/P1 responsive issue remains without a blocker.

## Final Report

Provide:

1. **Overall result**
2. **Major responsive problems fixed**
3. **Navigation/header/footer**
4. **Tables/cards/content layouts**
5. **Forms/filters/actions**
6. **Modals/sticky UI**
7. **Typography/spacing/media**
8. **Exact viewport validation performed**
9. **Deliberately unchanged behavior**
10. **Remaining issues with severity and next action**

# Final Directive

Think like a user who may visit this site from any reasonable screen size.

Repeatedly ask:

> **Can I read this comfortably?**

> **Can I reach every important action?**

> **Does anything overflow or collide?**

> **Does this layout still make sense when space disappears?**

> **Did we preserve the information that matters most?**

Leave behind the **same website**, but make it feel intentional, readable, efficient, and professionally usable across desktop, tablet, and mobile.