Adjust responsiveness

website/src/components/typography.js

@@ -94,9 +94,13 @@ const Headline = ({
 }) => {
     // This can be set via hidden="true" and as a prop, so we need to accept both
     if (hidden === true || hidden === 'true') return null
+    const hasAction = !!source || !!action
+    const headingClassNames = classNames(classes.heading, className, {
+        [classes.clear]: hasAction,
+    })
     const tags = tag ? tag.split(',').map(t => t.trim()) : []
     return (
-        <Component id={id} className={classNames(classes.heading, className)}>
+        <Component id={id} className={headingClassNames}>
             <Permalink id={id}>{children} </Permalink>
             {tags.map((tag, i) => (
                 <Tag spaced key={i}>
@@ -114,7 +118,7 @@ const Headline = ({
                 </Tag>
             )}
 
-            {(source || action) && (
+            {hasAction && (
                 <div className={classes.action}>
                     {source && (
                         <Button icon="code" to={github(source)}>

website/src/styles/button.module.sass

@@ -8,6 +8,7 @@
     transition: background-color, color 0.25s ease
     font: bold var(--font-size-xs)/var(--line-height-md) var(--font-secondary)
     text-transform: uppercase
+    white-space: nowrap
 
     &:hover
         border-color: var(--color-theme-dark)

website/src/styles/grid.module.sass

@@ -17,7 +17,6 @@ $flex-gap: 2rem
     flex-wrap: wrap
     justify-content: space-between
     grid-column-gap: $grid-gap-wide
-    grid-template-columns: 1fr
 
     & > *
         min-width: 0
@@ -27,6 +26,9 @@ $flex-gap: 2rem
         display: grid
 
 @include breakpoint(min, lg)
+    .root
+        grid-template-columns: 1fr
+
     @each $name, $cols in (half: 2, third: 3, quarter: 4)
         .#{$name}
             @include flex-fallback($cols, $flex-gap)

website/src/styles/typography.module.sass

@@ -73,12 +73,20 @@
 .no-gutter
     margin-bottom: 0 !important
 
+.clear:after
+    content: ""
+    clear: both
+    display: table
+
 .action
     font: var(--font-size-xs)/var(--line-height-sm) var(--font-primary)
     color: var(--color-subtle-dark)
     float: right
     max-width: 33%
     text-align: right
+    position: relative
+    top: 0.4rem
+    margin-right: 1rem
 
 .help
     color: var(--color-dark)