Layout & Styling Configuration

Relevant source files

The following files were used as context for generating this wiki page:

• app/layout.tsx
• app/globals.css
• app/page.module.css
• tailwind.config.js
• README.md
• package.json
• postcss.config.js

The Layout & Styling Configuration for the GeNCorE Command Center establishes a mobile-first, dark-themed visual environment optimized for AI agent management. This system leverages Next.js 15 App Router's root layout to maintain consistent UI structures across the dashboard, task panel, and PR review pages.

The architecture relies on Tailwind CSS for utility-first styling, complemented by PostCSS for autoprefixing and global CSS for browser-level resets and mobile-specific optimizations like "Safe Area" insets for modern mobile browsers.

Core Layout Structure

The application's root structure is defined in the app/layout.tsx file, which serves as the entry point for the entire UI. It sets the primary language to Polish (pl) and enforces a dark mode class at the HTML level.

Root Layout Components

The root layout wraps all child components within a body tag styled with Tailwind utilities to ensure a consistent background and typography across the application.

The viewport is specifically configured to fit the device width and handle "cover" fit for mobile notches.
Sources: app/layout.tsx:4-28, app/globals.css:1-17

Styling System & Frameworks

The project utilizes a modern CSS stack anchored by Tailwind CSS and PostCSS. The configuration ensures that styles are purged and optimized for production based on the content paths.

CSS Technology Stack

Technology	Version	Purpose
Next.js	15.5.14	Application framework and routing
Tailwind CSS	^3.3.0	Utility-first CSS framework
PostCSS	^8	CSS transformation and autoprefixing
Autoprefixer	^10.0.1	Vendor prefixing for cross-browser support

Sources: package.json:20-29, postcss.config.js:1-6

Tailwind Configuration

The tailwind.config.js file extends the default theme, specifically defining a custom sans-serif font stack that prioritizes system fonts (Apple, Segoe UI) for a native app feel.

theme: {
  extend: {
    fontFamily: {
      sans: [
        '-apple-system',
        'BlinkMacSystemFont',
        'San Francisco',
        'Segoe UI',
        'Roboto',
        'sans-serif',
      ],
    },
  },
}

Sources: tailwind.config.js:1-21

Visual Design Language

The application adheres to a strict "Always Dark" design philosophy, utilizing specific colors to represent different AI agents and UI states.

Color Palette and Theming

The UI is built on a bg-gray-900 foundation with varying levels of gray for depth (e.g., bg-gray-800 for headers and cards).

Element	Color Configuration	Source Reference
Dashboard Background	bg-gray-900	README.md:85
Copilot Agent	purple-400	README.md:92
Claude Agent	orange-400	README.md:93
Codex Agent	blue-400	README.md:94
UI Header/Borders	bg-gray-800 / border-gray-700	app/page.tsx:64

Mobile and Responsive Design

The system is designed with a "Mobile-first" approach, specifically optimized for iPhone users browsing via Brave or Safari.

Mobile Optimizations

1. Safe Area Insets: The globals.css defines a .safe-area-pb class using env(safe-area-inset-bottom) to prevent UI elements from being obscured by mobile notches or gesture bars.
2. Horizontal Overflow: The body is configured with overflow-x: hidden to prevent accidental horizontal scrolling on small screens.
3. Touch Interactions: -webkit-tap-highlight-color: transparent is applied to the HTML tag to improve the feel of touch interactions.

Component-Specific Styling

While Tailwind is the primary tool, app/page.module.css provides specific layout logic for the chat and configuration interfaces, including animations.

Layout Modules

The module CSS handles complex layouts such as the message feed and loading indicators:

• Flex Layouts: Used extensively for chat messages (userMessage vs assistantMessage).
• Animations: A bounce animation is defined for the loadingDots component to provide visual feedback during API requests.
• Media Queries: Specific breakpoints at 768px adjust the title size and form directions for mobile layouts.

Sources: app/page.module.css:151-177, app/page.module.css:204-220

Summary

The GeNCorE Layout & Styling Configuration provides a robust, dark-themed framework optimized for mobile productivity. By combining Next.js App Router layouts with Tailwind's utility system and PostCSS's automated processing, the project maintains a professional, AI-centric aesthetic that remains consistent across different device types and browsers.