Redmine #488 - 모바일 VPD/권한 화면 반응형 개선 설계

프로젝트 개요

VPD Backoffice는 Oracle Database VPD/ORDS 기능을 백오피스 권한 테이블로 제어하기 위한 Spring Boot 관리 도구다. 사용자는 사용자, 그룹, 역할, TABLE/VIEW 권한, VPD policy/filter, Bearer Token, ORDS 검증, MCP Reasoning을 한 화면 흐름에서 운영한다.

목표

390px 모바일 viewport에서 VPD 설정과 권한 관리 화면이 가로로 밀리지 않고, 아키텍처 설명 카드와 테이블/폼이 읽을 수 있는 형태로 표시되게 한다.

문제

캡처 기준:

/tmp/vpd-ux-audit/screenshots/mobile-vpd-policies.png
/tmp/vpd-ux-audit/screenshots/mobile-permissions.png

확인된 문제:

architecture-strip 모바일 override가 기본 grid 선언보다 앞에 있어 390px에서도 5열 grid가 유지된다.
일부 grid/table item이 min-width:auto로 계산되어 .table-responsive 바깥의 body 폭을 밀어낸다.
행 규칙 grid가 모바일에서도 4열을 유지해 입력 컨트롤이 좁아진다.

설계

공통 CSS에서 architecture strip의 모바일 override를 실제 선언 뒤쪽에 다시 배치한다.
card, form, table wrapper에 min-width: 0을 부여해 내부 overflow가 body 폭을 밀지 않게 한다.
모바일에서 큰 table은 body가 아니라 wrapper 내부에서만 horizontal scroll 되게 한다.
모바일에서 form-grid, rule-row, section-heading은 1열 또는 wrap 형태로 전환한다.

완료 기준

390px viewport에서 document.documentElement.scrollWidth <= window.innerWidth가 성립한다.
VPD 설정, 권한 관리 모바일 캡처에서 architecture strip이 1열로 표시된다.
테이블은 화면 밖으로 body를 밀지 않고 wrapper 내부에서 스크롤된다.
1440px 데스크톱 화면의 정보 밀도는 유지된다.

검증

mvn test
Playwright 캡처 또는 DOM 검사:
- /vpd-policies
- /permissions