diff --git a/packages/ilios-common/addon/components/ics-feed.hbs b/packages/ilios-common/addon/components/ics-feed.hbs index 48c1dfa03b..243cea3f62 100644 --- a/packages/ilios-common/addon/components/ics-feed.hbs +++ b/packages/ilios-common/addon/components/ics-feed.hbs @@ -15,7 +15,11 @@ {{#if (and this.copyButton this.showTooltip)}} - + {{t "general.copyIcsFeedUrl"}} {{/if}} diff --git a/packages/ilios-common/addon/components/ics-feed.js b/packages/ilios-common/addon/components/ics-feed.js index abd5f3855a..65eacf3a9a 100644 --- a/packages/ilios-common/addon/components/ics-feed.js +++ b/packages/ilios-common/addon/components/ics-feed.js @@ -8,4 +8,16 @@ export default class IcsFeedComponent extends Component { textCopied = restartableTask(async () => { this.flashMessages.success('general.copiedIcsFeedUrl'); }); + + popperOptions = { + placement: 'right', + modifiers: [ + { + name: 'flip', + options: { + fallbackPlacements: ['bottom'], + }, + }, + ], + }; } diff --git a/packages/ilios-common/app/styles/ilios-common/components/dashboard/navigation.scss b/packages/ilios-common/app/styles/ilios-common/components/dashboard/navigation.scss index d63a0ae5e4..ba8c2cfb83 100644 --- a/packages/ilios-common/app/styles/ilios-common/components/dashboard/navigation.scss +++ b/packages/ilios-common/app/styles/ilios-common/components/dashboard/navigation.scss @@ -64,11 +64,3 @@ } } } - -// tooltips are outside the document flow so have to be styled outside the component -.ics-feed-display-success-message-tooltip { - padding: 0; - &.ilios-tooltip .content { - max-width: 100%; - } -} diff --git a/packages/ilios-common/app/styles/ilios-common/components/ilios-tooltip.scss b/packages/ilios-common/app/styles/ilios-common/components/ilios-tooltip.scss index d3f560d150..d8dcf3f9b1 100644 --- a/packages/ilios-common/app/styles/ilios-common/components/ilios-tooltip.scss +++ b/packages/ilios-common/app/styles/ilios-common/components/ilios-tooltip.scss @@ -38,7 +38,17 @@ right: -4px; } + &[data-popper-placement^="right"] { + padding-left: 0; + padding-right: 0; + } + &[data-popper-placement^="right"] .arrow { left: -4px; } } + +// tooltips are outside the document flow so have to be styled outside the component +.ilios-tooltip.ics-feed-tooltip .content { + max-width: 100%; +}