Remove the remaining targeted inline style="" attributes and move the rules into shared CSS.

DavidQ · DavidQ · commit b29f69d0e0b9 · 2026-04-19T22:01:04.000-04:00
Prefer reuse of higher-level existing CSS when the rules already match or are close enough.
Create new shared CSS classes/selectors only when necessary.

PR: BUILD_PR_STYLE_INLINE_ATTR_CLEANUP_FINAL
diff --git a/docs/dev/reports/inline_attr_cleanup_strategy.txt b/docs/dev/reports/inline_attr_cleanup_strategy.txt
@@ -0,0 +1,8 @@
+Inline style-attribute cleanup strategy
+
+Priority:
+1. Reuse existing higher-level shared CSS when the inline rules already match or are close enough.
+2. Create new shared CSS classes/selectors only when reuse would be incorrect.
+3. Preserve visual behavior/layout as closely as possible.
+
+This PR is intentionally surgical and limited to the remaining known inline style="" occurrences.
diff --git a/docs/operations/dev/codex_commands.md b/docs/operations/dev/codex_commands.md
@@ -2,40 +2,36 @@ MODEL: GPT-5.4-codex
 REASONING: high
 
 COMMAND:
-Create BUILD_PR_STYLE_INLINE_CLEANUP_REUSE_HIGHER_LEVEL_CSS
+Create BUILD_PR_STYLE_INLINE_ATTR_CLEANUP_FINAL
 
 Rules:
 - output ONLY the final zip to:
-  <project folder>/tmp/BUILD_PR_STYLE_INLINE_CLEANUP_REUSE_HIGHER_LEVEL_CSS.zip
+  <project folder>/tmp/BUILD_PR_STYLE_INLINE_ATTR_CLEANUP_FINAL.zip
 - do NOT create staging folders in <project folder>/tmp
 - do NOT modify roadmap in the PR bundle
 - Codex updates roadmap during execution only if this PR touches an existing STYLE item execution-backed
-- remove all targeted inline <style> blocks
-- if the inline styles match or are close to a higher-level existing CSS path, reuse it
+- remove all targeted inline style="" attributes
+- if the rules match or are close to a higher-level existing CSS path, reuse it
 - create new shared CSS only when necessary
 - do NOT introduce inline style=""
+- do NOT introduce embedded <style> blocks
 - do NOT introduce JS-generated styling
 - preserve behavior/layout as closely as possible
 
 Targets:
-- games/Breakout/index.html
-- samples/phase-13/1316/index.html
-- samples/phase-13/1316/server/networkSampleADashboardServer.mjs
-- samples/phase-13/1317/index.html
-- samples/phase-13/1318/index.html
-- samples/phase-13/1319/index.html
-- samples/phase-13/1319/server/realNetworkDashboard.mjs
-- samples/shared/runtimePreviewCapture.html
-- tests/index.html
-- tests/testRunner.html
-- tools/preview/preview_svg_generator.html
-- tools/shared/preview/generate-list-previews.html
-- tools/shared/preview/generate-previews.html
+- tools/Tool Host/index.html
+- tools/Vector Map Editor/how_to_use.html
+
+Confirmed inline style targets:
+- label.field width:100%
+- textarea width:100%
+- data-tool-host-mount-container min-height/border/radius/overflow/background
+- .callout margin-top:16px
 
 Required work:
-1. Audit each inline <style> block.
+1. Audit the remaining inline style="" attributes in the targeted files.
 2. Reuse higher-level existing CSS when the rules already match or are close enough.
-3. Create new shared CSS only if reuse would be incorrect.
-4. Remove the inline <style> blocks.
-5. Add/adjust stylesheet links accordingly.
+3. Create new shared CSS classes/selectors only if reuse would be incorrect.
+4. Remove the inline style="" attributes.
+5. Update markup to use classes or existing selectors accordingly.
 6. Keep the change narrow, testable, and free of inline/embedded styling in the targeted files.
diff --git a/docs/operations/dev/commit_comment.txt b/docs/operations/dev/commit_comment.txt
@@ -1,6 +1,6 @@
-Remove the remaining targeted inline <style> blocks and move the styles into shared CSS.
+Remove the remaining targeted inline style="" attributes and move the rules into shared CSS.
 
 Prefer reuse of higher-level existing CSS when the rules already match or are close enough.
-Create new shared CSS only when necessary.
+Create new shared CSS classes/selectors only when necessary.
 
-PR: BUILD_PR_STYLE_INLINE_CLEANUP_REUSE_HIGHER_LEVEL_CSS
+PR: BUILD_PR_STYLE_INLINE_ATTR_CLEANUP_FINAL
diff --git a/docs/pr/BUILD_PR_STYLE_INLINE_ATTR_CLEANUP_FINAL.md b/docs/pr/BUILD_PR_STYLE_INLINE_ATTR_CLEANUP_FINAL.md
@@ -0,0 +1,49 @@
+# BUILD_PR_STYLE_INLINE_ATTR_CLEANUP_FINAL
+
+## Purpose
+Remove the remaining inline `style=""` attributes and move them into shared CSS using the same reuse-first rule as the inline `<style>` cleanup.
+
+## Single PR Purpose
+Eliminate the last known inline style-attribute violations without redesigning layout.
+
+## Targeted Files
+- `tools/Tool Host/index.html`
+- `tools/Vector Map Editor/how_to_use.html`
+
+## Confirmed Remaining Inline Style Targets
+### `tools/Tool Host/index.html`
+- `<label class="field" style="width:100%;">`
+- `<textarea ... style="width:100%;">`
+- `<div data-tool-host-mount-container ... style="min-height: 420px; border: 1px solid rgba(148, 163, 184, 0.35); border-radius: 10px; overflow: hidden; background: rgba(15, 23, 42, 0.45);"></div>`
+
+### `tools/Vector Map Editor/how_to_use.html`
+- `<div class="callout" style="margin-top: 16px;">`
+
+## Required Rule
+If an inline style attribute matches or is close to rules already appropriate in a higher-level shared CSS path, reuse that CSS destination instead of creating a new file.
+
+## Reuse-First CSS Destination Rules
+1. Reuse an existing higher-level CSS file when the rules are already represented or close enough to belong there.
+2. Prefer the highest reasonable shared destination that fits the file’s role.
+3. Only create a new shared CSS rule/class when reuse would be incorrect.
+4. Preserve current visual behavior as closely as possible.
+
+## Required Work
+1. Remove all remaining inline `style=""` attributes from the targeted files.
+2. Move the rules into reused higher-level CSS where appropriate.
+3. Create new shared CSS classes/selectors only when reuse would be wrong.
+4. Update markup to use classes or existing selectors instead of inline styles.
+5. Do not introduce new inline `style=""`.
+6. Do not introduce embedded `<style>` blocks.
+7. Do not introduce JS-generated styling.
+8. Preserve behavior/layout as closely as possible.
+
+## Acceptance
+- targeted files no longer contain inline `style=""`
+- higher-level shared CSS is reused whenever close enough
+- new CSS classes/selectors are created only when necessary
+- visual behavior is preserved closely
+- no inline `style=""` introduced
+- no embedded `<style>` blocks introduced
+- no JS-generated styling introduced
+- change is testable
diff --git a/tools/Tool Host/index.html b/tools/Tool Host/index.html
@@ -20,9 +20,9 @@ <h2>Tool Host Foundation</h2>
         </label>
       </div>
       <div class="meta tools-platform-control-row">
-        <label class="field" style="width:100%;">
+        <label class="field tools-platform-field-full">
           Optional State JSON
-          <textarea data-tool-host-state-input rows="5" style="width:100%;" placeholder='{"example":"value"}'></textarea>
+          <textarea data-tool-host-state-input rows="5" placeholder='{"example":"value"}'></textarea>
         </label>
       </div>
       <div class="meta tools-platform-control-row">
@@ -38,7 +38,7 @@ <h2>Tool Host Foundation</h2>
 
     <section class="panel">
       <h3 data-tool-host-current-label>No tool mounted.</h3>
-      <div data-tool-host-mount-container class="tools-platform-dock-panel" style="min-height: 420px; border: 1px solid rgba(148, 163, 184, 0.35); border-radius: 10px; overflow: hidden; background: rgba(15, 23, 42, 0.45);"></div>
+      <div data-tool-host-mount-container class="tools-platform-dock-panel tools-platform-mount-container"></div>
     </section>
   </div>
   <div data-tools-platform-status></div>
diff --git a/tools/Vector Map Editor/how_to_use.html b/tools/Vector Map Editor/how_to_use.html
@@ -336,7 +336,7 @@ <h3>Notes</h3>
           <p>You stay inside the intended scope of the editor and can jump back to the right files quickly.</p>
         </div>
       </div>
-      <div class="callout" style="margin-top: 16px;">
+      <div class="callout callout--spaced">
         <div class="path">tools/Vector Map Editor/index.html</div>
         <div class="path">tools/Vector Map Editor/README.md</div>
       </div>
diff --git a/tools/Vector Map Editor/vectorMapEditor.css b/tools/Vector Map Editor/vectorMapEditor.css
@@ -384,6 +384,10 @@ body.vector-editor-page {
   line-height: 1.45;
 }
 
+.vector-map-help-page .callout.callout--spaced {
+  margin-top: 16px;
+}
+
 .vector-editor-page .muted {
   color: var(--muted);
 }
diff --git a/tools/shared/platformShell.css b/tools/shared/platformShell.css
@@ -318,6 +318,22 @@ body.tools-platform-surface .tools-platform-dock-panel {
   overflow: auto;
 }
 
+body.tools-platform-surface .tools-platform-field-full {
+  width: 100%;
+}
+
+body.tools-platform-surface .tools-platform-field-full textarea {
+  width: 100%;
+}
+
+body.tools-platform-surface .tools-platform-mount-container {
+  min-height: 420px;
+  border: 1px solid rgba(148, 163, 184, 0.35);
+  border-radius: 10px;
+  overflow: hidden;
+  background: rgba(15, 23, 42, 0.45);
+}
+
 @media (min-width: 1201px) {
   body.tools-platform-surface .tools-platform-resize-panel {
     min-width: 220px;

Original file line number	Diff line number	Diff line change
`@@ -384,6 +384,10 @@ body.vector-editor-page {`
`384`	`384`	`line-height: 1.45;`
`385`	`385`	`}`
`386`	`386`
	`387`	`+.vector-map-help-page .callout.callout--spaced {`
	`388`	`+ margin-top: 16px;`
	`389`	`+}`
	`390`	`+`
`387`	`391`	`.vector-editor-page .muted {`
`388`	`392`	`color: var(--muted);`
`389`	`393`	`}`