style: make editor more immersive with full-width design

- Remove border and background from full variant composer
- Increase padding for better readability
- Update toolbar padding to match content area
- Make case study panel full-width and transparent

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Justin Edmund 2025-06-26 10:01:10 -04:00
parent 75b61021a0
commit 9da64583ba
3 changed files with 19 additions and 7 deletions

View file

@ -413,12 +413,13 @@
} }
.panel-case-study { .panel-case-study {
background: white; background: transparent;
padding: 0; padding: 0;
min-height: 80vh; min-height: 80vh;
margin: 0 auto; margin: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%;
@include breakpoint('phone') { @include breakpoint('phone') {
min-height: 600px; min-height: 600px;

View file

@ -353,7 +353,7 @@
.edra-editor { .edra-editor {
flex: 1; flex: 1;
width: 100%; width: 100%;
padding: $unit-2x; padding: $unit-4x;
min-height: 100px; min-height: 100px;
outline: none; outline: none;
overflow-y: auto; overflow-y: auto;
@ -361,6 +361,15 @@
&.with-toolbar { &.with-toolbar {
border-top: none; border-top: none;
} }
// More generous padding for full variant
.composer--full & {
padding: $unit-4x $unit-6x;
@include breakpoint('phone') {
padding: $unit-3x $unit-4x;
}
}
} }
.edra-loading { .edra-loading {
@ -390,9 +399,7 @@
} }
.composer--full { .composer--full {
background: $white; background: transparent;
border: 1px solid $gray-85;
border-radius: $corner-radius;
overflow: hidden; overflow: hidden;
} }
</style> </style>

View file

@ -162,8 +162,12 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: 4px; gap: 4px;
padding: 0 $unit-2x; padding: 0 $unit-6x;
flex-wrap: wrap; flex-wrap: wrap;
@include breakpoint('phone') {
padding: 0 $unit-4x;
}
} }
.text-style-dropdown { .text-style-dropdown {