diff --git a/packages/about/lib/components/about-view.js b/packages/about/lib/components/about-view.js index 27425a19f2..0e2d0f2049 100644 --- a/packages/about/lib/components/about-view.js +++ b/packages/about/lib/components/about-view.js @@ -83,7 +83,7 @@ module.exports = class AboutView extends EtchComponent { return $.div( { className: 'pane-item native-key-bindings about' }, $.div( - { className: 'about-container' }, + { className: 'about-container min-width-min-content' }, $.header( { className: 'about-header' }, $.a( @@ -94,7 +94,7 @@ module.exports = class AboutView extends EtchComponent { { className: 'about-header-info' }, $.span( { - className: 'about-version-container inline-block atom', + className: 'about-version-container atom', onclick: this.handleAtomVersionClick.bind(this) }, $.span( @@ -114,7 +114,7 @@ module.exports = class AboutView extends EtchComponent { $.span( { className: - 'about-version-container inline-block show-more-expand', + 'about-version-container show-more-expand', onclick: this.handleShowMoreClick.bind(this) }, $.span({ className: 'about-more-expand' }, 'Show more') @@ -168,7 +168,7 @@ module.exports = class AboutView extends EtchComponent { ), $.div( - { className: 'about-updates group-start' }, + { className: 'about-updates group-start min-width-min-content' }, $.div( { className: 'about-updates-box' }, $.div( @@ -177,7 +177,7 @@ module.exports = class AboutView extends EtchComponent { { className: 'about-updates-item app-unsupported' }, $.span( { className: 'about-updates-label is-strong' }, - 'Updates have been moved to the package ', $.code({}, 'pulsar-updater'), '.', + 'Updates have been moved to the package ', $.code({style: {'white-space': 'nowrap'}}, 'pulsar-updater'), '.', $.br() ), $.a( @@ -242,7 +242,8 @@ module.exports = class AboutView extends EtchComponent { className: 'btn about-update-action-button', onclick: this.executeUpdateAction.bind(this), style: { - display: 'block' + display: 'block', + margin: '0 .5em' } }, 'Check Now' diff --git a/packages/about/styles/about.less b/packages/about/styles/about.less index 0b0e408f2e..fb7f23e3ba 100644 --- a/packages/about/styles/about.less +++ b/packages/about/styles/about.less @@ -33,6 +33,10 @@ margin-top: -.2em; } + .min-width-min-content { + min-width: min-content; + } + // used to group different elements .group-start { margin-top: 4em; @@ -45,8 +49,13 @@ .about-container { width: 100%; max-width: 500px; + + .icon::before { + margin-right: 0; + } } + // Header -------------------------------- .about-atom-io:hover { @@ -64,7 +73,16 @@ transition: color 0.2s; } +.about-header-info { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + column-gap: 30px; +} .about-version-container { + vertical-align: middle; + white-space: nowrap; &:hover { color: lighten(@text-color, 15%); } @@ -84,17 +102,12 @@ font-size: .9em; } -.about-header-release-notes { - vertical-align: middle; - margin-left: 1em; -} - // Updates -------------------------------- .about-updates { width: 100%; - //max-width: 510px; + max-width: 39em; } .about-updates-box { @@ -128,11 +141,6 @@ margin: 0 .4em; } -.about-updates-release-notes, -.about-updates-instructions { - margin: 0 1em 0 1.5em; -} - .about-auto-updates { margin-top: 1em; input { @@ -144,6 +152,8 @@ // Love -------------------------------- .about-love { + min-width: max-content; + .icon::before { // Make these octicons look good inlined with text position: relative;