| @@ -105,8 +105,22 @@ | ||
| 105 | 105 | .repeater-template { |
| 106 | 106 | display: none; |
| 107 | 107 | } |
| 108 | 108 | |
| 109 | +/* Disabled / pro-gated repeater: the subfields and the repeater's own buttons each | |
| 110 | + carry a disabled attribute, which is what actually blocks interaction. These rules | |
| 111 | + only supply the matching visual affordance on the wrapper, which cannot be disabled. */ | |
| 112 | +.wz-repeater-disabled .add-item, | |
| 113 | +.wz-repeater-disabled .repeater-item-actions .button { | |
| 114 | + pointer-events: none; | |
| 115 | + opacity: 0.5; | |
| 116 | + cursor: not-allowed; | |
| 117 | +} | |
| 118 | + | |
| 119 | +.wz-repeater-disabled .add-item:hover { | |
| 120 | + background-color: #0073aa; | |
| 121 | +} | |
| 122 | + | |
| 109 | 123 | /* Responsiveness for smaller screens */ |
| 110 | 124 | @media screen and (max-width: 768px) { |
| 111 | 125 | .wz-repeater-wrapper { |
| 112 | 126 | margin-bottom: 1rem; |
| @@ -333,12 +347,34 @@ | ||
| 333 | 347 | .wz-toggle input[type="checkbox"]:disabled + .wz-toggle-slider { |
| 334 | 348 | opacity: 0.5; |
| 335 | 349 | } |
| 336 | 350 | |
| 351 | +/* | |
| 352 | + * Settings page layout: content + sidebar, side by side. | |
| 353 | + * | |
| 354 | + * WP core lays out #post-body-content and #postbox-container-1 via floats, but a float can | |
| 355 | + * only avoid floats that precede it in source order — #post-body-content comes first, so it | |
| 356 | + * has nothing to avoid and renders at full width, overlapping the sidebar that floats beside | |
| 357 | + * it. Flexbox sidesteps the ordering problem entirely and (with align-items: flex-start) still | |
| 358 | + * lets the sidebar be shorter than the tab content, matching the old float layout's look. | |
| 359 | + */ | |
| 360 | +#post-body.wz-settings-post-body { | |
| 361 | + display: flex; | |
| 362 | + align-items: flex-start; | |
| 363 | + gap: 24px; | |
| 364 | +} | |
| 365 | + | |
| 366 | +#post-body.wz-settings-post-body > #postbox-container-1 { | |
| 367 | + flex: 0 0 280px; | |
| 368 | + width: 280px; | |
| 369 | +} | |
| 370 | + | |
| 337 | 371 | /* Vertical settings tabs. */ |
| 338 | 372 | .wz-vertical-tabs { |
| 339 | 373 | display: flex; |
| 340 | 374 | align-items: flex-start; |
| 375 | + flex: 1 1 auto; | |
| 376 | + min-width: 0; | |
| 341 | 377 | gap: 24px; |
| 342 | 378 | } |
| 343 | 379 | |
| 344 | 380 | .wz-vertical-tabs > ul.nav-tab-wrapper { |
| @@ -414,8 +450,12 @@ | ||
| 414 | 450 | } |
| 415 | 451 | |
| 416 | 452 | /* Horizontal tabs on small screens (WP admin breakpoint); pills keep their style. */ |
| 417 | 453 | @media screen and (max-width: 782px) { |
| 454 | + #post-body.wz-settings-post-body { | |
| 455 | + display: block; | |
| 456 | + } | |
| 457 | + | |
| 418 | 458 | .wz-vertical-tabs { |
| 419 | 459 | display: block; |
| 420 | 460 | } |
| 421 | 461 | |
| @@ -618,5 +658,7 @@ | ||
| 618 | 658 | |
| 619 | 659 | .wz-default-value code { |
| 620 | 660 | font-size: 11px; |
| 621 | 661 | padding: 1px 5px; |
| 662 | + overflow-wrap: anywhere; | |
| 663 | + word-break: break-word; | |
| 622 | 664 | } |
