fix: allow align-items to be adjusted - #3739
Open
Arukuen wants to merge 1 commit into
Open
Conversation
📝 WalkthroughWalkthroughThe Hero content column now uses ChangesHero alignment
Estimated code review effort: 1 (Trivial) | ~2 minutes Mergeability Score: 🟡 Moderate · up to The change can prevent Hero distribution alignment modes from working because invalid distribution values are being applied to align-items. This is a bounded correctness issue that should be fixed before merging. 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
🤖 Pull request artifacts
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/block/hero/style.scss`:
- Line 5: Update the Hero alignment styling around the align-items declaration
so it no longer consumes --stk-alignment-justify-content distribution values;
use the appropriate cross-axis variable for align-items or apply distribution
values through justify-content. Preserve all supported alignment modes and add
regression coverage covering each mode.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 1611bc2e-7223-455a-9877-5137d34cc11f
📒 Files selected for processing (1)
src/block/hero/style.scss
| .stk-block-hero__content > .stk-inner-blocks.stk--column-flex:not(.stk--block-horizontal-flex) { | ||
| justify-content: center; | ||
| align-items: center; | ||
| align-items: var(--stk-alignment-justify-content, center); |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | 🏗️ Heavy lift
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -eu
printf '%s\n' '--- src/block/hero/style.scss ---'
cat -n src/block/hero/style.scss | sed -n '1,40p'
printf '%s\n' '--- src/styles/block.scss ---'
cat -n src/styles/block.scss | sed -n '330,400p'
printf '%s\n' '--- alignment variable references ---'
rg -n --glob '*.scss' --glob '*.css' --glob '*.js' --glob '*.ts' \
-- '--stk-alignment-justify-content|align-items|justify-content' src | head -250
printf '%s\n' '--- static contract check ---'
python3 - <<'PY'
from pathlib import Path
import re
hero = Path("src/block/hero/style.scss").read_text()
shared = Path("src/styles/block.scss").read_text()
decl = re.search(r"align-items\s*:\s*var\(\s*--stk-alignment-justify-content\s*,\s*([^)]*)\)", hero)
values = sorted(set(re.findall(r"--stk-alignment-justify-content[^;]*?([a-z-]+)", shared)))
invalid_for_align_items = {"space-between", "space-around", "space-evenly"}
print("hero_declaration:", decl.group(0) if decl else None)
print("shared_variable_values:", values)
print("distribution_values_invalid_for_align_items:",
sorted(invalid_for_align_items.intersection(values)))
PYRepository: gambitph/Stackable
Length of output: 21024
🏁 Script executed:
#!/bin/bash
set -eu
printf '%s\n' '--- Hero styles and editor styles ---'
cat -n src/block/hero/style.scss
cat -n src/block/hero/editor.scss | sed -n '1,80p'
printf '%s\n' '--- alignment mixin call sites ---'
rg -n -C 4 --glob '*.scss' \
'`@include` (align-(center|left|right|space-between|space-around|space-evenly)-styles)|align-(center|left|right|space-between|space-around|space-evenly)-styles' \
src/styles src/block src/components | head -300
printf '%s\n' '--- selectors around shared alignment rules ---'
cat -n src/styles/block.scss | sed -n '70,180p'
cat -n src/styles/block.scss | sed -n '430,500p'
printf '%s\n' '--- Hero references and alignment-related implementation ---'
rg -n -C 5 --glob '*.{js,jsx,ts,tsx,scss}' \
'stk-block-hero|align-space-between|align-space-around|align-space-evenly|has-text-align|alignment' \
src/block/hero src | head -400Repository: gambitph/Stackable
Length of output: 34440
🏁 Script executed:
#!/bin/bash
set -eu
printf '%s\n' '--- alignment helper definitions ---'
rg -n -C 8 --glob '*.{js,jsx,ts,tsx}' \
'function getAlignmentClasses|const getAlignmentClasses|function getContentAlignmentClasses|const getContentAlignmentClasses|getContentAlignmentClasses|getAlignmentClasses' \
src | head -300
printf '%s\n' '--- complete Hero class construction ---'
cat -n src/block/hero/edit.js | sed -n '55,125p'
cat -n src/block/hero/save.js | sed -n '25,75p'
printf '%s\n' '--- alignment attributes and class values ---'
rg -n -C 5 --glob '*.{js,jsx,ts,tsx}' \
'textAlign|textAlignTablet|textAlignMobile|has-text-align-space|contentAlign' \
src/components src/higher-order src/block | head -350
printf '%s\n' '--- exact selector/property contract ---'
python3 - <<'PY'
from pathlib import Path
import re
hero = Path("src/block/hero/style.scss").read_text()
shared = Path("src/styles/block.scss").read_text()
edit = Path("src/block/hero/edit.js").read_text()
save = Path("src/block/hero/save.js").read_text()
selector = re.search(r"(\.stk-block-hero__content\s*>\s*\.stk-inner-blocks[^{}]+)\s*\{", hero)
decl = re.search(r"align-items\s*:\s*var\(\s*--stk-alignment-justify-content\s*,\s*center\s*\)", hero)
distribution_classes = re.findall(
r"\.has-text-align-(space-(?:between|around|evenly))\s*\{", shared
)
print("hero_selector:", selector.group(1) if selector else None)
print("hero_align_items_uses_shared_variable:", bool(decl))
print("distribution_classes_defined:", distribution_classes)
print("edit_attaches_content_alignment_classes:",
"getContentAlignmentClasses( props.attributes )" in edit)
print("save_attaches_content_alignment_classes:",
"getContentAlignmentClasses( attributes )" in save)
PYRepository: gambitph/Stackable
Length of output: 47587
Do not pass distribution values to align-items.
--stk-alignment-justify-content can resolve to space-between, space-around, or space-evenly. These values are invalid for align-items, so Hero distribution alignment has no effect. Use a dedicated cross-axis variable or map distribution modes to justify-content. Add regression coverage for all alignment modes.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/block/hero/style.scss` at line 5, Update the Hero alignment styling
around the align-items declaration so it no longer consumes
--stk-alignment-justify-content distribution values; use the appropriate
cross-axis variable for align-items or apply distribution values through
justify-content. Preserve all supported alignment modes and add regression
coverage covering each mode.
|
Size Change: +5 B (0%) Total Size: 2.64 MB 📦 View Changed
ℹ️ View Unchanged
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
fixes #3557
Summary by CodeRabbit