1d5d4d447d
Mobile Responsive Layout: - Add useMediaQuery, useIsMobile, useIsTablet, useIsDesktop hooks for device detection - Create MobileHeader component with hamburger menu and action drawer - Create BottomToolbar for mobile navigation (Files, Members) - Create SlidePanel component for full-screen mobile sidebars - Update RoomDetail.tsx with mobile/desktop conditional rendering - Update RoomList.tsx with single-column grid and touch-friendly buttons - Add CSS custom properties for safe areas and touch targets (min 44px) - Add mobile viewport meta tags for notched devices Open Room Access: - All authenticated users can view all rooms (not just their own) - Users can join active rooms they're not members of - Add is_member field to room responses - Update room list API to return all rooms by default Admin Room Management: - Add permanent delete functionality for system admins - Add delete confirmation dialog with room title verification - Broadcast room deletion via WebSocket to connected users - Add users search API for adding members 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
60 lines
1.4 KiB
CSS
60 lines
1.4 KiB
CSS
@import "tailwindcss";
|
|
|
|
:root {
|
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
line-height: 1.5;
|
|
font-weight: 400;
|
|
|
|
/* Safe area insets for notched devices (iPhone X+) */
|
|
--safe-area-inset-top: env(safe-area-inset-top, 0px);
|
|
--safe-area-inset-right: env(safe-area-inset-right, 0px);
|
|
--safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
|
|
--safe-area-inset-left: env(safe-area-inset-left, 0px);
|
|
|
|
/* Mobile-specific spacing */
|
|
--mobile-header-height: 56px;
|
|
--mobile-bottom-toolbar-height: 56px;
|
|
--touch-target-min: 44px;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
min-width: 320px;
|
|
min-height: 100vh;
|
|
/* Prevent pull-to-refresh on mobile */
|
|
overscroll-behavior-y: contain;
|
|
}
|
|
|
|
#root {
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* Utility class for safe area padding */
|
|
.safe-area-bottom {
|
|
padding-bottom: max(var(--safe-area-inset-bottom), 16px);
|
|
}
|
|
|
|
.safe-area-top {
|
|
padding-top: max(var(--safe-area-inset-top), 0px);
|
|
}
|
|
|
|
/* Touch-friendly minimum size utility */
|
|
.touch-target {
|
|
min-width: var(--touch-target-min);
|
|
min-height: var(--touch-target-min);
|
|
}
|
|
|
|
/* Prevent text selection on touch for UI elements */
|
|
.no-select {
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
-webkit-touch-callout: none;
|
|
}
|
|
|
|
/* Smooth transitions for layout changes */
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
.transition-layout {
|
|
transition: all 0.3s ease-in-out;
|
|
}
|
|
}
|