From 479a537f211c49768d04c6b5563caf035cbcf404 Mon Sep 17 00:00:00 2001 From: Joakim Date: Sun, 21 Sep 2025 22:19:47 +0200 Subject: [PATCH] Fix button alignment issue in three-layer architecture - Move padding from .insertr-button-frame to .insertr-style-btn.insertr-style-preview - Add align-items and justify-content to button container for proper centering - Remove width: 100% from button frame to prevent unnecessary stretching - Fix off-center text in default Bold, Italic, and Link buttons - Maintain style isolation while ensuring consistent button alignment --- internal/content/assets/insertr.css | 27 +++++++++++++-------------- lib/src/styles/insertr.css | 27 +++++++++++++-------------- 2 files changed, 26 insertions(+), 28 deletions(-) diff --git a/internal/content/assets/insertr.css b/internal/content/assets/insertr.css index 9acde5e..0018a5a 100644 --- a/internal/content/assets/insertr.css +++ b/internal/content/assets/insertr.css @@ -376,14 +376,16 @@ body:not(.insertr-edit-mode) .insertr-editing-hover::after { background: var(--insertr-bg-primary) !important; border: 1px solid var(--insertr-border-color) !important; border-radius: var(--insertr-border-radius) !important; - padding: 0 !important; /* Let frame handle padding */ + padding: 6px 10px !important; /* Move padding to button level */ font-size: var(--insertr-font-size-sm); cursor: pointer; transition: var(--insertr-transition); - /* Fixed button dimensions */ + /* Fixed button dimensions and layout */ min-height: 32px; display: inline-flex; + align-items: center; + justify-content: center; /* Reset button-level text properties to prevent inheritance */ font-family: var(--insertr-font-family); @@ -393,13 +395,11 @@ body:not(.insertr-edit-mode) .insertr-editing-hover::after { color: var(--insertr-text-primary); } -/* Button frame - consistent internal layout immune to content styling */ +/* Button frame - minimal layout container with no padding */ .insertr-button-frame { - display: flex; + display: inline-flex; align-items: center; justify-content: center; - padding: 6px 10px; - width: 100%; /* Create style containment boundary */ contain: layout style; @@ -417,10 +417,6 @@ body:not(.insertr-edit-mode) .insertr-editing-hover::after { text-overflow: ellipsis; white-space: nowrap; - /* Reset any browser default margins/padding that could cause inconsistency */ - margin: 0; - padding: 0; - /* All other styling (color, weight, transform, decoration, etc.) comes from applied classes - no interference */ } @@ -428,9 +424,6 @@ body:not(.insertr-edit-mode) .insertr-editing-hover::after { /* Fallback styling when no meaningful classes are detected */ .insertr-style-sample.insertr-fallback-style { color: var(--insertr-text-primary); - /* Ensure consistent text appearance for action buttons */ - font-size: inherit; - font-weight: inherit; } /* Hover state for preview buttons - subtle visual feedback */ @@ -495,7 +488,13 @@ body:not(.insertr-edit-mode) .insertr-editing-hover::after { box-shadow: 0 1px 2px rgba(23, 162, 184, 0.2); } -/* Legacy class - no longer used with three-layer button architecture */ +/* Default preview content styling */ +.insertr-default-preview { + font-size: var(--insertr-font-size-sm); + font-weight: 500; + padding: var(--insertr-spacing-xs) var(--insertr-spacing-sm); + display: inline-block; +} /* Small indicator for default styles */ .insertr-style-btn.insertr-default-style::after { diff --git a/lib/src/styles/insertr.css b/lib/src/styles/insertr.css index 9acde5e..0018a5a 100644 --- a/lib/src/styles/insertr.css +++ b/lib/src/styles/insertr.css @@ -376,14 +376,16 @@ body:not(.insertr-edit-mode) .insertr-editing-hover::after { background: var(--insertr-bg-primary) !important; border: 1px solid var(--insertr-border-color) !important; border-radius: var(--insertr-border-radius) !important; - padding: 0 !important; /* Let frame handle padding */ + padding: 6px 10px !important; /* Move padding to button level */ font-size: var(--insertr-font-size-sm); cursor: pointer; transition: var(--insertr-transition); - /* Fixed button dimensions */ + /* Fixed button dimensions and layout */ min-height: 32px; display: inline-flex; + align-items: center; + justify-content: center; /* Reset button-level text properties to prevent inheritance */ font-family: var(--insertr-font-family); @@ -393,13 +395,11 @@ body:not(.insertr-edit-mode) .insertr-editing-hover::after { color: var(--insertr-text-primary); } -/* Button frame - consistent internal layout immune to content styling */ +/* Button frame - minimal layout container with no padding */ .insertr-button-frame { - display: flex; + display: inline-flex; align-items: center; justify-content: center; - padding: 6px 10px; - width: 100%; /* Create style containment boundary */ contain: layout style; @@ -417,10 +417,6 @@ body:not(.insertr-edit-mode) .insertr-editing-hover::after { text-overflow: ellipsis; white-space: nowrap; - /* Reset any browser default margins/padding that could cause inconsistency */ - margin: 0; - padding: 0; - /* All other styling (color, weight, transform, decoration, etc.) comes from applied classes - no interference */ } @@ -428,9 +424,6 @@ body:not(.insertr-edit-mode) .insertr-editing-hover::after { /* Fallback styling when no meaningful classes are detected */ .insertr-style-sample.insertr-fallback-style { color: var(--insertr-text-primary); - /* Ensure consistent text appearance for action buttons */ - font-size: inherit; - font-weight: inherit; } /* Hover state for preview buttons - subtle visual feedback */ @@ -495,7 +488,13 @@ body:not(.insertr-edit-mode) .insertr-editing-hover::after { box-shadow: 0 1px 2px rgba(23, 162, 184, 0.2); } -/* Legacy class - no longer used with three-layer button architecture */ +/* Default preview content styling */ +.insertr-default-preview { + font-size: var(--insertr-font-size-sm); + font-weight: 500; + padding: var(--insertr-spacing-xs) var(--insertr-spacing-sm); + display: inline-block; +} /* Small indicator for default styles */ .insertr-style-btn.insertr-default-style::after {