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
This commit is contained in:
2025-09-21 22:19:47 +02:00
parent 948ab241ec
commit 479a537f21
2 changed files with 26 additions and 28 deletions

View File

@@ -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 {