| @@ -128,12 +128,14 @@ | ||
| 128 | 128 | display: block; |
| 129 | 129 | position: fixed; |
| 130 | 130 | top: <?php echo (int) self::FRAME; ?>px; |
| 131 | 131 | right: <?php echo (int) self::FRAME; ?>px; |
| 132 | - bottom: <?php echo (int) self::FRAME; ?>px; | |
| 132 | + bottom: calc(<?php echo (int) self::FRAME; ?>px + var(--extendify-notification-bar-height, 0px)); | |
| 133 | 133 | left: <?php echo (int) self::WIDTH; ?>px; |
| 134 | 134 | border-radius: 1rem; |
| 135 | 135 | box-shadow: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a, #e0e0e0 0 0 0 9999px; |
| 136 | + /* Unclipped, the 9999px shadow covers the notification bar. */ | |
| 137 | + clip-path: inset(-9999px -9999px -<?php echo (int) self::FRAME; ?>px -9999px); | |
| 136 | 138 | pointer-events: none; |
| 137 | 139 | z-index: 100000; |
| 138 | 140 | } |
| 139 | 141 | .extendify-agent-skeleton #extendify-agent-skeleton { |
| @@ -139,9 +141,9 @@ | ||
| 139 | 141 | .extendify-agent-skeleton #extendify-agent-skeleton { |
| 140 | 142 | display: block; |
| 141 | 143 | position: fixed; |
| 142 | 144 | top: 0; |
| 143 | - bottom: 0; | |
| 145 | + bottom: var(--extendify-notification-bar-height, 0px); | |
| 144 | 146 | left: 0; |
| 145 | 147 | width: <?php echo (int) self::WIDTH; ?>px; |
| 146 | 148 | padding: <?php echo (int) self::FRAME; ?>px; |
| 147 | 149 | box-sizing: border-box; |