Fix several CSS compatibility issues in Safari (#841)

* Fix button margin default for Safari compatibility

* Add Safari vendor prefixes that are somehow still necessary

* Add workaround for Safari not rendering text selection

* Replace <h3> and <p> placeholder labels in floating menus with <TextLabel>

* Replace <span> elements with <TextLabel> and set its cursor for Safari
This commit is contained in:
Keavon Chambers
2022-11-06 00:50:45 -07:00
parent 3f98d1c896
commit 4c16efb33d
25 changed files with 92 additions and 69 deletions

View File

@@ -12,13 +12,13 @@
@click.middle="(e: MouseEvent) => (e?.stopPropagation(), closeAction?.(tabIndex))"
data-tab
>
<span>{{ tabLabel.name }}</span>
<TextLabel>{{ tabLabel.name }}</TextLabel>
<IconButton :action="(e?: MouseEvent) => (e?.stopPropagation(), closeAction?.(tabIndex))" :icon="'CloseX'" :size="16" v-if="tabCloseButtons" />
</LayoutRow>
</LayoutRow>
<PopoverButton :icon="'VerticalEllipsis'">
<h3>Panel Options</h3>
<p>The contents of this popover menu are coming soon</p>
<TextLabel :bold="true">Panel Options</TextLabel>
<TextLabel :multiline="true">The contents of this popover menu are coming soon</TextLabel>
</PopoverButton>
</LayoutRow>
<LayoutCol class="panel-body">