Files
shopdb-flask/frontend/src/views/geenforce/GeEnforceLayout.vue
cproudlock 7089a61b50 Move GE-Enforce to its own top-level section; fix overflow + input theming
GE-Enforce is a large operational surface (manifest authoring + fleet
compliance), not a setting, and it was squished in the settings two-pane shell.
Promote it to a dedicated full-width top-level section:

- New sidebar entry "GE-Enforce" (plugin get_navigation_items, shield icon,
  auto-gated to the enabled plugin) instead of two Settings > Integrations cards.
- Tabbed shell GeEnforceLayout.vue (Manifests | Enforcement Reports) with
  full-width children under AppLayout, not the narrow settings rail.
- Views moved settings/ -> geenforce/ (ManifestEditor.vue, EnforcementReports.vue).

Theming + overflow fixes (the "chaotic / cut off / different inputs" report):
- Inputs/selects/textareas now match the stock settings look (border, radius,
  --bg, focus color) instead of browser defaults.
- No horizontal overflow: editor grid uses minmax(0,1fr) + min-width:0 on
  children, collapses to one column under 1000px; entry table and reports table
  scroll inside their own overflow-x containers; detail actions wrap.

Verified at 1280px: no page overflow, detail pane + tables fit.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-12 21:12:57 -04:00

44 lines
1.3 KiB
Vue

<template>
<div class="geenforce-section">
<div class="section-header">
<h1>GE-Enforce</h1>
<p class="section-sub">Desired-state install manifests for imaging PC types, and the fleet's reported results.</p>
</div>
<nav class="section-tabs">
<router-link to="/geenforce/manifests" class="tab">Manifests</router-link>
<router-link to="/geenforce/reports" class="tab">Enforcement Reports</router-link>
</nav>
<router-view />
</div>
</template>
<script setup>
// Tabbed shell for the GE-Enforce section. Children render the manifest editor
// and the fleet-compliance reports full-width (not squeezed into the settings rail).
</script>
<style scoped>
.geenforce-section { max-width: 1400px; }
.section-header { margin-bottom: 0.5rem; }
.section-header h1 { margin: 0; }
.section-sub { color: var(--text-light); margin: 0.25rem 0 0; }
.section-tabs {
display: flex;
gap: 0.25rem;
border-bottom: 1px solid var(--border);
margin: 1rem 0 1.25rem;
}
.tab {
padding: 0.5rem 0.9rem;
text-decoration: none;
color: var(--text-light);
border-bottom: 2px solid transparent;
font-weight: 500;
}
.tab:hover { color: var(--text); }
.tab.router-link-active {
color: var(--primary);
border-bottom-color: var(--primary);
}
</style>