Merge pull request #717 from pulsar-edit/about-package-responsive-design-for-narrow-width-panels

about: Make the About page's CSS responsive for narrow panes

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'

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;