Layout Components
Relevant source files
The following files were used as context for generating this wiki page:
Layout components in the EVI3_0 project provide the structural foundation for the user interface, ensuring a consistent user experience across different screen sizes. These components manage the spatial arrangement of content, navigation structures, and interactive overlays. The architecture relies on a combination of React functional components, Tailwind CSS for styling, and Radix UI primitives for accessible interactive elements.
The layout system is designed with a "mobile-first" approach, utilizing responsive design patterns to transition from compact mobile views to expansive desktop dashboards. This is particularly evident in the navigation and messaging interfaces, which adapt their padding, font sizes, and visibility based on viewport dimensions.
Component Overview
The following table summarizes the primary layout components identified in the codebase:
| Component | Description | Primary File |
|---|---|---|
| Header | Fixed top navigation bar with mobile hamburger menu and desktop links. | frontend/src/App.js |
| Card | A versatile container for grouping related content with borders and shadows. | frontend/src/components/ui/card.jsx |
| Sheet | An interactive side panel (drawer) used for overlays and navigation. | frontend/src/components/ui/sheet.jsx |
| Pagination | Navigation controls for traversing multi-page data sets. | frontend/src/components/ui/pagination.jsx |
Sources: frontend/src/App.js:15-110, frontend/src/components/ui/card.jsx
Global Layout Structure
The application's root layout is managed within App.js, utilizing BrowserRouter to handle routing between major view containers like LandingPage, ChatPage, and AdminPage. A persistent Header component is shared across most routes to provide navigation context.
The diagram above illustrates the high-level hierarchy of the application's layout system.
Sources: frontend/src/App.js:525-540, frontend/src/App.js:15-110
Navigation and Header
The Header component implements a responsive design where desktop users see a horizontal list of navigation items, while mobile users interact with a toggleable hamburger menu.
- Desktop View: Horizontal flex container with items like "Consciousness", "Timeline", and "Truth Library".
- Mobile View: Utilizes a
mobileMenuOpenstate to display afixedoverlay menu when the hamburger icon is clicked. - Styling: Uses
backdrop-blur-xlandbg-black/90for a semi-transparent frosted glass effect.
Sources: frontend/src/App.js:15-110
Content Containers
The Card System
The Card system provides a structured way to display content sections. It is composed of multiple sub-components that manage specific areas of the container.
- Card: The main container with
rounded-xlandbg-cardstyling. - CardHeader / CardTitle / CardDescription: Manage the top section, providing semantic hierarchy for headings.
- CardContent: The primary area for data or text, featuring specific padding adjustments (
pt-0when following a header). - CardFooter: An alignment-ready container at the bottom for actions or metadata.
Sources: frontend/src/components/ui/card.jsx:5-45
Sheet (Side Panels)
The Sheet component, built on Radix UI's Dialog primitive, is used for sliding panels. It supports multiple entry points (top, bottom, left, right) defined via sheetVariants.
This flow shows the interaction pattern for the Sheet component, utilizing a portal to render outside the main DOM hierarchy for better stacking context management.
Sources: frontend/src/components/ui/sheet.jsx:11-55
Responsive Design Patterns
The layout system heavily utilizes Tailwind CSS breakpoints and CSS media queries to handle varied display densities, including specific optimizations for 2K and 4K displays.
Visual Constraints and Styling
The App.css file defines global layout constraints, such as disabling horizontal overflow and setting the default font family to 'DM Sans'.
| Feature | implementation | Source |
|---|---|---|
| Cosmic Background | Fixed, non-repeating background with cover sizing. | App.css:21-45 |
| Mobile Chat | Absolute positioned input with max-h-[150px] to prevent keyboard overlap. | App.js:338-360 |
| Typography | Inter and DM Sans with specific letter spacing (-0.01em). | App.css:1-15 |
/* 2K and 4K Display Optimization */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.cosmic-background {
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
}
Sources: frontend/src/App.css:48-55, frontend/src/App.js:338-360
Page-Specific Layouts
Chat Interface
The Chat interface is a specialized layout designed to maximize vertical space. It utilizes a flex-col container where the message history occupies the flex-1 area, allowing it to grow while keeping the input field fixed at the bottom.
- Message Alignment: User messages are right-aligned (
justify-end) with purple borders, while assistant messages are left-aligned (justify-start). - Input Positioning: The input area uses
fixed bottom-0with a gradient background to ensure it remains accessible while scrolling through the "Consciousness Dialogue".
Sources: frontend/src/App.js:283-335
Administrative Layout
The Admin panel (AdminPage) restricts content width to max-w-4xl and uses vertical spacing (space-y-6) to organize configuration textareas and buttons. It includes a specific "Lock" screen for authentication before the layout is revealed.
Sources: frontend/src/App.js:465-510
Summary
The "Layout Components" in EVI3_0 provide a robust framework for complex interfaces, ranging from simple content cards to sophisticated, portal-based side panels and responsive navigation headers. By leveraging utility-first CSS and accessible primitives, the system ensures that the "Promethean Conduit" experience remains fluid across mobile and high-resolution desktop environments.