Polish ACP system layout

CHANGELOG.md

@@ -4,6 +4,7 @@
 - Refined ACP System tab with left navigation, section-specific requirements, and CLI PHP selector.
 - Added CLI PHP interpreter options (php, keyhelp-php-domain, custom) with KeyHelp guidance.
 - Updated CLI update tooling and automation notes (KeyHelp PHP handling, CI runner requirements).
+- Adjusted ACP layout and tab styling for better dark-mode readability and auto-sizing sidebars.
 
 ## 2026-02-10
 - Reshaped ACP System tab with left navigation and dedicated views (Overview, Live Update, CLI, CI/CD).

resources/js/index.css

@@ -862,8 +862,8 @@ a {
 }
 
 [data-bs-theme="dark"] {
-  --bb-ink: #e6e8eb;
-  --bb-ink-muted: #9aa4b2;
+  --bb-ink: #aaaeb4;
+  --bb-ink-muted: #6b7483;
   --bb-border: #2a2f3a;
   --bb-page-bg: radial-gradient(circle at 10% 20%, #141823 0%, #10131a 45%, #0b0e14 100%);
 }
@@ -922,10 +922,18 @@ a {
 
 .nav-tabs .nav-link {
   color: var(--bb-accent, #f29b3f);
+  border: 1px solid var(--bb-border);
+  border-bottom-color: transparent;
+  border-radius: 10px 10px 0 0;
+  margin-right: 0.35rem;
+  background: transparent;
 }
 
 .nav-tabs .nav-link.active {
   color: inherit;
+  background: rgba(255, 255, 255, 0.04);
+  border-color: var(--bb-border);
+  border-bottom-color: transparent;
 }
 
 .bb-version {

resources/js/pages/Acp.jsx

@@ -2730,7 +2730,7 @@ function Acp({ isAdmin }) {
             <Tabs defaultActiveKey="general" className="mb-3">
                 <Tab eventKey="general" title={t('acp.general')}>
                     <Row className="g-4">
-                        <Col lg={3} xl={2}>
+                        <Col xs={12} lg="auto">
                             <div className="bb-acp-sidebar">
                                 <div className="bb-acp-sidebar-section">
                                     <div className="bb-acp-sidebar-title">{t('acp.quick_access')}</div>
@@ -2790,13 +2790,7 @@ function Acp({ isAdmin }) {
                                 </div>
                             </div>
                         </Col>
-                        <Col lg={9} xl={10}>
-                            <div className="bb-acp-panel mb-4">
-                                <div className="bb-acp-panel-header">
-                                    <h5 className="mb-1">{t('acp.welcome_title')}</h5>
-                                    <p className="bb-muted mb-0">{t('acp.general_hint')}</p>
-                                </div>
-                            </div>
+                        <Col xs={12} lg>
                             <div className="bb-acp-panel mb-4">
                                 <div className="bb-acp-panel-header">
                                     <div className="d-flex align-items-center justify-content-between">
@@ -3723,7 +3717,7 @@ function Acp({ isAdmin }) {
                     {systemLoading && <p className="bb-muted">{t('acp.loading')}</p>}
                     {!systemLoading && (
                         <Row className="g-4">
-                            <Col lg={3} xl={2}>
+                            <Col xs={12} lg="auto">
                                 <div className="bb-acp-sidebar">
                                     <div className="bb-acp-sidebar-section">
                                         <div className="bb-acp-sidebar-title">{t('acp.system')}</div>
@@ -3768,7 +3762,7 @@ function Acp({ isAdmin }) {
                                     </div>
                                 </div>
                             </Col>
-                            <Col lg={9} xl={10}>
+                            <Col xs={12} lg>
                                 {systemSection === 'info' && (
                                     <div className="bb-acp-panel">
                                         <div className="bb-acp-panel-header">