add rest of channel content to the side of the file viewer

.eslintrc.json

@@ -38,6 +38,7 @@
     "import/prefer-default-export": 0,
     "no-return-assign": 0,
     "react/require-default-props": 0,
-    "react/jsx-closing-tag-location": 0
+    "react/jsx-closing-tag-location": 0,
+    "jsx-a11y/no-noninteractive-element-to-interactive-role": 0
   }
 }

.gitignore

@@ -5,4 +5,4 @@
 yarn-error.log
 package-lock.json
 .idea/
-/build/daemon.ver
+/build/daemon*

src/renderer/component/common/credit-amount.jsx

@@ -11,9 +11,10 @@ type Props = {
   showPlus: boolean,
   isEstimate?: boolean,
   large?: boolean,
-  plain?: boolean,
+  showLBC?: boolean,
   fee?: boolean,
-  noStyle?: boolean,
+  inheritStyle?: boolean,
+  filePage?: boolean,
 };
 
 class CreditAmount extends React.PureComponent<Props> {
@@ -22,6 +23,7 @@ class CreditAmount extends React.PureComponent<Props> {
     showFree: false,
     showFullPrice: false,
     showPlus: false,
+    showLBC: true,
   };
 
   render() {
@@ -33,9 +35,10 @@ class CreditAmount extends React.PureComponent<Props> {
       showPlus,
       large,
       isEstimate,
-      plain,
-      noStyle,
       fee,
+      showLBC,
+      inheritStyle,
+      filePage,
     } = this.props;
 
     const minimumRenderableAmount = 10 ** (-1 * precision);
@@ -62,7 +65,7 @@ class CreditAmount extends React.PureComponent<Props> {
         amountText = `+${amountText}`;
       }
 
-      if (!plain) {
+      if (showLBC) {
         amountText = `${amountText} ${__('LBC')}`;
       }
 
@@ -78,8 +81,8 @@ class CreditAmount extends React.PureComponent<Props> {
           'credit-amount--free': !large && isFree,
           'credit-amount--cost': !large && !isFree,
           'credit-amount--large': large,
-          'credit-amount--plain': plain,
+          'credit-amount--inherit': inheritStyle,
-          'credit-amount--no-style': noStyle,
+          'credit-amount--file-page': filePage,
         })}
       >
         {amountText}

src/renderer/component/common/form-components/form-field.jsx

@@ -4,7 +4,7 @@ import ReactDOMServer from 'react-dom/server';
 import classnames from 'classnames';
 import MarkdownPreview from 'component/common/markdown-preview';
 import SimpleMDE from 'react-simplemde-editor';
-import 'simplemde/dist/simplemde.min.css';
+import 'simplemde/dist/simplemde.min.css'; // eslint-disable-line import/no-extraneous-dependencies
 import Toggle from 'react-toggle';
 import { openEditorMenu } from 'util/contextMenu';
 
@@ -24,6 +24,7 @@ type Props = {
   stretch?: boolean,
   affixClass?: string, // class applied to prefix/postfix label
   useToggle?: boolean,
+  noPadding?: boolean,
 };
 
 export class FormField extends React.PureComponent<Props> {
@@ -41,6 +42,7 @@ export class FormField extends React.PureComponent<Props> {
       stretch,
       affixClass,
       useToggle,
+      noPadding,
       ...inputProps
     } = this.props;
 
@@ -108,6 +110,7 @@ export class FormField extends React.PureComponent<Props> {
         <div
           className={classnames('form-field__input', {
             'form-field--auto-height': type === 'markdown',
+            'form-field--no-padding': noPadding,
           })}
         >
           {prefix && (

src/renderer/component/fileCard/view.jsx

@@ -92,7 +92,7 @@ class FileCard extends React.PureComponent<Props> {
         onContextMenu={handleContextMenu}
       >
         <CardMedia thumbnail={thumbnail} />
-        <div className="card-media__internal-links">{showPrice && <FilePrice uri={uri} />}</div>
+        <div className="card-media__internal-links" />
         <div className="card__title-identity">
           <div className="card__title--small">
             <TruncatedText lines={3}>{title}</TruncatedText>
@@ -103,13 +103,12 @@ class FileCard extends React.PureComponent<Props> {
             ) : (
               <React.Fragment>
                 <UriIndicator uri={uri} link />
-                <div>
                 {isRewardContent && <Icon iconColor="red" icon={icons.FEATURED} />}
                 {fileInfo && <Icon icon={icons.LOCAL} />}
-                </div>
               </React.Fragment>
             )}
           </div>
+          {showPrice && <FilePrice uri={uri} />}
         </div>
       </section>
     );

src/renderer/component/filePrice/view.jsx

@@ -9,6 +9,7 @@ type Props = {
   uri: string,
   fetching: boolean,
   claim: ?{},
+  filePage?: boolean,
 };
 
 class FilePrice extends React.PureComponent<Props> {
@@ -33,13 +34,14 @@ class FilePrice extends React.PureComponent<Props> {
   };
 
   render() {
-    const { costInfo, showFullPrice } = this.props;
+    const { costInfo, showFullPrice, filePage } = this.props;
 
     return costInfo ? (
       <CreditAmount
+        showFree
+        filePage={filePage}
         amount={costInfo.cost}
         isEstimate={!costInfo.includesData}
-        showFree
         showFullPrice={showFullPrice}
       />
     ) : null;

src/renderer/component/fileTile/view.jsx

@@ -11,7 +11,6 @@ import classnames from 'classnames';
 import FilePrice from 'component/filePrice';
 
 type Props = {
-  fullWidth: boolean, // removes the max-width css
   showUri: boolean,
   showLocal: boolean,
   obscureNsfw: boolean,
@@ -28,13 +27,15 @@ type Props = {
   updatePublishForm: ({}) => void,
   hideNoResult: boolean, // don't show the tile if there is no claim at this uri
   displayHiddenMessage?: boolean,
+  displayDescription?: boolean,
+  small?: boolean,
 };
 
 class FileTile extends React.PureComponent<Props> {
   static defaultProps = {
     showUri: false,
     showLocal: false,
-    fullWidth: false,
+    displayDescription: true,
   };
 
   componentDidMount() {
@@ -57,13 +58,14 @@ class FileTile extends React.PureComponent<Props> {
       showUri,
       obscureNsfw,
       claimIsMine,
-      fullWidth,
       showLocal,
       isDownloaded,
       clearPublish,
       updatePublishForm,
       hideNoResult,
       displayHiddenMessage,
+      displayDescription,
+      small,
     } = this.props;
 
     const shouldHide = !claimIsMine && obscureNsfw && metadata && metadata.nsfw;
@@ -96,7 +98,7 @@ class FileTile extends React.PureComponent<Props> {
     return !name && hideNoResult ? null : (
       <section
         className={classnames('file-tile card--link', {
-          'file-tile--fullwidth': fullWidth,
+          'file-tile--small': small,
         })}
         onClick={onClick}
         onKeyUp={onClick}
@@ -108,20 +110,29 @@ class FileTile extends React.PureComponent<Props> {
           {isResolvingUri && <div className="card__title--small">{__('Loading...')}</div>}
           {!isResolvingUri && (
             <React.Fragment>
-              <div className="card__title--small card__title--file">
+              <div className={small ? 'card__title--x-small' : 'card__title--file'}>
-                <TruncatedText lines={2}>{title || name}</TruncatedText>
+                <TruncatedText lines={3}>{title || name}</TruncatedText>
               </div>
-              <div className="card__subtitle">
+              <div
+                className={classnames('card__subtitle', {
+                  'card__subtitle--x-small': small,
+                })}
+              >
                 {showUri ? uri : channel || __('Anonymous')}
                 {isRewardContent && <Icon icon={icons.FEATURED} />}
                 {showLocal && isDownloaded && <Icon icon={icons.LOCAL} />}
               </div>
+              <FilePrice uri={uri} />
+              {displayDescription && (
                 <div className="card__subtext card__subtext--small">
                   <TruncatedText lines={3}>{description}</TruncatedText>
                 </div>
-              <div className="card__subtitle-price">
+              )}
-                <FilePrice uri={uri} />
+              {
-              </div>
+                // <div className="card__subtitle-price">
+                //
+                // </div>
+              }
               {!name && (
                 <React.Fragment>
                   {__('This location is unused.')}{' '}

src/renderer/component/page/view.jsx

@@ -12,6 +12,7 @@ type Props = {
   noPadding: ?boolean,
   extraPadding: ?boolean,
   notContained: ?boolean, // No max-width, but keep the padding
+  forContent: ?boolean,
   loading: ?boolean,
 };
 
@@ -71,15 +72,24 @@ class Page extends React.PureComponent<Props, State> {
   loaderTimeout: ?TimeoutID;
 
   render() {
-    const { pageTitle, children, noPadding, extraPadding, notContained, loading } = this.props;
+    const {
+      pageTitle,
+      children,
+      noPadding,
+      extraPadding,
+      notContained,
+      loading,
+      forContent,
+    } = this.props;
     const { showLoader } = this.state;
 
     return (
       <main
         className={classnames('main', {
-          'main--contained': !notContained && !noPadding && !extraPadding,
+          'main--contained': !notContained && !noPadding && !extraPadding && !forContent,
           'main--no-padding': noPadding,
           'main--extra-padding': extraPadding,
+          'main--for-content': forContent,
         })}
       >
         {pageTitle && (

src/renderer/component/recommendedVideos/index.js

@@ -0,0 +1,21 @@
+import { connect } from 'react-redux';
+import { doFetchClaimsByChannel } from 'redux/actions/content';
+import {
+  makeSelectClaimsInChannelForCurrentPage,
+  makeSelectFetchingChannelClaims,
+} from 'lbry-redux';
+import RecommendedVideos from './view';
+
+const select = (state, props) => ({
+  claimsInChannel: makeSelectClaimsInChannelForCurrentPage(props.channelUri)(state),
+  fetching: makeSelectFetchingChannelClaims(props.channelUri)(state),
+});
+
+const perform = dispatch => ({
+  fetchClaims: (uri, page) => dispatch(doFetchClaimsByChannel(uri, page)),
+});
+
+export default connect(
+  select,
+  perform
+)(RecommendedVideos);

src/renderer/component/recommendedVideos/view.jsx

@@ -0,0 +1,54 @@
+// @flow
+import React from 'react';
+import FileTile from 'component/fileTile';
+import { FormRow, FormField } from 'component/common/form';
+import ToolTip from 'component/common/tooltip';
+import type { Claim } from 'types/claim';
+
+type Props = {
+  channelUri: ?string,
+  claimsInChannel: ?Array<Claim>,
+  fetching: boolean,
+  fetchClaims: (string, number) => void,
+};
+
+export default class RecommendedVideos extends React.PureComponent<Props> {
+  componentDidMount() {
+    const { channelUri, fetchClaims, claimsInChannel } = this.props;
+    if (!claimsInChannel) {
+      fetchClaims(channelUri, 1);
+    }
+  }
+
+  render() {
+    const { claimsInChannel, fetching } = this.props;
+
+    return (
+      <div className="card__list--recommended">
+        <FormRow alignRight>
+          <ToolTip onComponent body={__('Automatically download and play free content.')}>
+            <FormField
+              useToggle
+              noPadding
+              name="autoplay"
+              type="checkbox"
+              prefix={__('Autoplay')}
+              checked={false}
+              onChange={() => {}}
+            />
+          </ToolTip>
+        </FormRow>
+        {fetching && <div>Loading</div>}
+        {claimsInChannel &&
+          claimsInChannel.map(({ permanent_url: permanentUrl }) => (
+            <FileTile
+              small
+              displayDescription={false}
+              key={permanentUrl}
+              uri={`lbry://${permanentUrl}`}
+            />
+          ))}
+      </div>
+    );
+  }
+}

src/renderer/component/rewardSummary/view.jsx

@@ -31,7 +31,7 @@ class RewardSummary extends React.Component<Props> {
               <React.Fragment>
                 {__('You have')}
                 &nbsp;
-                <CreditAmount noStyle amount={unclaimedRewardAmount} precision={8} />
+                <CreditAmount inheritStyle amount={unclaimedRewardAmount} precision={8} />
                 &nbsp;
                 {__('in unclaimed rewards')}.
               </React.Fragment>

src/renderer/component/transactionList/internal/transaction-list-item.jsx

@@ -6,8 +6,8 @@ import DateTime from 'component/dateTime';
 import Button from 'component/button';
 import { buildURI } from 'lbry-redux';
 import * as txnTypes from 'constants/transaction_types';
-import type { Transaction } from '../view';
 import * as ICONS from 'constants/icons';
+import type { Transaction } from '../view';
 
 type Props = {
   transaction: Transaction,
@@ -25,12 +25,6 @@ class TransactionListItem extends React.PureComponent<Props> {
     (this: any).abandonClaim = this.abandonClaim.bind(this);
   }
 
-  abandonClaim() {
-    const { txid, nout } = this.props.transaction;
-
-    this.props.revokeClaim(txid, nout);
-  }
-
   getLink(type: string) {
     if (type === txnTypes.TIP) {
       return <Button icon={ICONS.UNLOCK} onClick={this.abandonClaim} title={__('Unlock Tip')} />;
@@ -38,10 +32,14 @@ class TransactionListItem extends React.PureComponent<Props> {
     return <Button icon={ICONS.TRASH} onClick={this.abandonClaim} title={__('Abandon Claim')} />;
   }
 
-  capitalize(string: string) {
+  abandonClaim() {
-    return string.charAt(0).toUpperCase() + string.slice(1);
+    const { txid, nout } = this.props.transaction;
+
+    this.props.revokeClaim(txid, nout);
   }
 
+  capitalize = (string: string) => string.charAt(0).toUpperCase() + string.slice(1);
+
   render() {
     const { reward, transaction, isRevokeable } = this.props;
     const { amount, claim_id: claimId, claim_name: name, date, fee, txid, type } = transaction;
@@ -55,12 +53,12 @@ class TransactionListItem extends React.PureComponent<Props> {
     return (
       <tr>
         <td>
-          <CreditAmount amount={amount} plain noStyle showPlus precision={8} />
+          <CreditAmount inheritStyle showPlus amount={amount} precision={8} />
           <br />
 
           {fee !== 0 && (
             <span className="table__item-label">
-              <CreditAmount plain noStyle fee amount={fee} precision={8} />
+              <CreditAmount inheritStyle fee amount={fee} precision={8} />
             </span>
           )}
         </td>

src/renderer/component/viewOnWebButton/view.jsx

@@ -18,7 +18,7 @@ export default (props: Props) => {
     <Button
       icon={icons.GLOBE}
       button="alt"
-      label={__('View on Web')}
+      label={__('Share')}
       href={`http://spee.ch/${speechURL}`}
     />
   ) : null;

src/renderer/page/file/view.jsx

@@ -14,14 +14,12 @@ import Button from 'component/button';
 import SubscribeButton from 'component/subscribeButton';
 import ViewOnWebButton from 'component/viewOnWebButton';
 import Page from 'component/page';
-import * as settings from 'constants/settings';
 import type { Claim } from 'types/claim';
 import type { Subscription } from 'types/subscription';
 import FileDownloadLink from 'component/fileDownloadLink';
 import classnames from 'classnames';
-import { FormField, FormRow } from 'component/common/form';
-import ToolTip from 'component/common/tooltip';
 import getMediaType from 'util/getMediaType';
+import RecommendedVideos from 'component/recommendedVideos';
 
 type Props = {
   claim: Claim,
@@ -37,14 +35,12 @@ type Props = {
   rewardedContentClaimIds: Array<string>,
   obscureNsfw: boolean,
   claimIsMine: boolean,
-  autoplay: boolean,
   costInfo: ?{},
   navigate: (string, ?{}) => void,
   openModal: ({ id: string }, { uri: string }) => void,
   fetchFileInfo: string => void,
   fetchCostInfo: string => void,
   prepareEdit: ({}, string) => void,
-  setClientSetting: (string, boolean | string) => void,
   checkSubscription: ({ channelName: string, uri: string }) => void,
   subscriptions: Array<Subscription>,
 };
@@ -62,12 +58,6 @@ class FilePage extends React.Component<Props> {
     'application',
   ];
 
-  constructor(props: Props) {
-    super(props);
-
-    (this: any).onAutoplayChange = this.onAutoplayChange.bind(this);
-  }
-
   componentDidMount() {
     const { uri, fileInfo, fetchFileInfo, fetchCostInfo } = this.props;
 
@@ -88,10 +78,6 @@ class FilePage extends React.Component<Props> {
     }
   }
 
-  onAutoplayChange(event: SyntheticInputEvent<*>) {
-    this.props.setClientSetting(settings.AUTOPLAY, event.target.checked);
-  }
-
   checkSubscription = (props: Props) => {
     if (props.subscriptions.find(sub => sub.channelName === props.claim.channel_name)) {
       props.checkSubscription({
@@ -119,7 +105,6 @@ class FilePage extends React.Component<Props> {
       claimIsMine,
       prepareEdit,
       navigate,
-      autoplay,
       costInfo,
       fileInfo,
     } = this.props;
@@ -160,16 +145,9 @@ class FilePage extends React.Component<Props> {
     }
 
     return (
-      <Page extraPadding>
+      <Page forContent>
-        {!claim || !metadata ? (
+        <section className="content__wrapper">
-          <section>
+          {showFile && <FileViewer className="content__embedded" uri={uri} mediaType={mediaType} />}
-            <span className="empty">{__('Empty claim or metadata info.')}</span>
-          </section>
-        ) : (
-          <section className="card">
-            {showFile && (
-              <FileViewer className="content__embedded" uri={uri} mediaType={mediaType} />
-            )}
           {!showFile &&
             (thumbnail ? (
               <Thumbnail shouldObscure={shouldObscureThumbnail} src={thumbnail} />
@@ -184,14 +162,13 @@ class FilePage extends React.Component<Props> {
                 </div>
               </div>
             ))}
+
           <div className="card__content">
             <div className="card__title-identity--file">
               <h1 className="card__title card__title--file">{title}</h1>
               <div className="card__title-identity-icons">
-                  {isRewardContent && (
+                {isRewardContent && <Icon iconColor="red" tooltip="bottom" icon={icons.FEATURED} />}
-                    <Icon iconColor="red" tooltip="bottom" icon={icons.FEATURED} />
+                <FilePrice filePage uri={normalizeURI(uri)} />
-                  )}
-                  <FilePrice uri={normalizeURI(uri)} />
               </div>
             </div>
             <span className="card__subtitle card__subtitle--file">
@@ -235,24 +212,14 @@ class FilePage extends React.Component<Props> {
                 <FileActions uri={uri} claimId={claim.claim_id} />
               </div>
             </div>
-              <FormRow padded>
-                <ToolTip onComponent body={__('Automatically download and play free content.')}>
-                  <FormField
-                    useToggle
-                    name="autoplay"
-                    type="checkbox"
-                    postfix={__('Autoplay')}
-                    checked={autoplay}
-                    onChange={this.onAutoplayChange}
-                  />
-                </ToolTip>
-              </FormRow>
-            </div>
             <div className="card__content--extra-padding">
               <FileDetails uri={uri} />
             </div>
+          </div>
+        </section>
+        <section>
+          <RecommendedVideos uri={uri} channelUri={`lbry://${subscriptionUri}`} />
         </section>
-        )}
       </Page>
     );
   }

src/renderer/page/search/view.jsx

@@ -73,7 +73,7 @@ class SearchPage extends React.PureComponent<Props> {
                 <Icon icon={icons.HELP} />
               </ToolTip>
             </div>
-            <FileTile fullWidth showUri displayHiddenMessage uri={normalizeURI(query)} />
+            <FileTile showUri displayHiddenMessage uri={normalizeURI(query)} />
           </React.Fragment>
         )}
         <FileListSearch query={query} />

src/renderer/scss/_gui.scss

@@ -203,6 +203,11 @@ p {
   padding-right: 100px;
 }
 
+.main--for-content {
+  padding: $spacing-width * 2/3;
+  display: flex;
+}
+
 .page__header {
   padding: $spacing-vertical * 2/3;
   padding-bottom: 0;
@@ -263,30 +268,47 @@ p {
 }
 
 .credit-amount--free {
+  color: var(--color-secondary);
+
+  &.credit-amount--file-page {
     color: var(--color-dark-blue);
     background-color: var(--color-secondary);
+  }
 }
 
 .credit-amount--cost {
+  color: var(--color-yellow);
+
+  &.credit-amount--file-page {
     color: var(--color-black);
     background-color: var(--color-yellow);
+  }
 }
 
-.credit-amount--plain {
+.credit-amount--inherit {
   background-color: inherit;
   color: inherit;
   font-weight: inherit;
   font-size: inherit;
+  font-family: 'metropolis-medium';
+  padding: 0;
 }
 
-.credit-amount.credit-amount--no-style {
+// .credit-amount--plain {
-  padding: 0;
+//   background-color: inherit;
-  font-size: inherit;
+//   color: inherit;
-  font-weight: inherit;
+//   font-weight: inherit;
-  color: inherit;
+//   font-size: inherit;
-  background-color: transparent;
+// }
-  font-family: 'metropolis-medium';
+
-}
+// .credit-amount.credit-amount--no-style {
+//   padding: 0;
+//   font-size: inherit;
+//   font-weight: inherit;
+//   color: inherit;
+//   background-color: transparent;
+//   font-family: 'metropolis-medium';
+// }
 
 .divider__horizontal {
   border-top: var(--color-divider);

src/renderer/scss/_vars.scss

@@ -9,7 +9,7 @@ $large-breakpoint: 1921px;
 
 :root {
   /* Widths & spacings */
-  --side-nav-width: 220px;
+  --side-nav-width: 190px;
   --side-nav-width-m: 240px;
   --side-nav-width-l: 320px;
   --font-size-subtext-multiple: 0.92;

src/renderer/scss/component/_card.scss

@@ -114,13 +114,17 @@
 .card__title--small {
   font-size: 14px;
   line-height: 18px;
-  padding-top: $spacing-vertical / 3;
 
   @media only screen and (min-width: $large-breakpoint) {
     font-size: 16px;
   }
 }
 
+.card__title--x-small {
+  font-size: 12px;
+  line-height: 12px;
+}
+
 .card__title--file {
   font-family: 'metropolis-bold';
   font-size: 28px;
@@ -135,20 +139,27 @@
   font-size: 14px;
   font-family: 'metropolis-medium';
   color: var(--card-text-color);
+  display: flex;
+  align-items: center;
 
   .icon {
-    margin-top: $spacing-vertical * 1/6;
+    margin: 0 0 0 $spacing-vertical * 1/3;
-
-    &:not(:first-of-type) {
-      margin: 0 $spacing-vertical * 1/3;
-    }
   }
 }
 
+.card__subtitle--x-small {
+  font-size: 12px;
+}
+
 .card__subtitle-price {
   padding-top: $spacing-vertical * 1/3;
 }
 
+.card__title--small + .card__subtitle,
+.card__title--x-small + .card__subtitle {
+  padding-top: $spacing-vertical * 1/3;
+}
+
 .card__meta {
   color: var(--color-help);
   font-size: 14px;
@@ -189,6 +200,11 @@
   margin-top: $spacing-vertical * 2/3;
 }
 
+.card__content--columns {
+  display: flex;
+  padding: 0;
+}
+
 .card__content--extra-padding {
   margin-top: $spacing-vertical * 3/2;
 }
@@ -312,7 +328,11 @@
 
 .card-row__scroll-btns {
   display: flex;
+  padding-right: $spacing-width * 1/3;
+
+  @media (min-width: $medium-breakpoint) {
     padding-right: $spacing-width;
+  }
 }
 
 .card-row__scrollhouse {
@@ -401,6 +421,13 @@
   }
 }
 
+.card__list--recommended {
+  padding-left: $spacing-width;
+  .card {
+    display: block;
+  }
+}
+
 .card__success-msg {
   border-left: 2px solid var(--success-msg-border);
   color: var(--success-msg-color);

src/renderer/scss/component/_content.scss

@@ -1,7 +1,13 @@
+.content__wrapper {
+  width: 740px;
+}
+
 .content__embedded {
   background-color: var(--color-black);
   width: 100%;
   padding-top: var(--video-aspect-ratio);
+  padding-left: 36px;
+  padding-right: 36px;
   position: relative;
   display: flex;
   align-items: center;
@@ -119,3 +125,8 @@ img {
   max-height: 100%;
   max-width: 100%;
 }
+
+.content__info {
+  padding-left: 24px;
+  width: 920px;
+}

src/renderer/scss/component/_file-list.scss

@@ -22,11 +22,13 @@
 
 .file-tile {
   display: flex;
-  margin-top: $spacing-vertical;
+  margin-top: $spacing-vertical * 1/3;
 
   .card__media {
-    height: var(--file-tile--media-height);
+    // height: var(--file-tile--media-height);
-    flex: 0 0 var(--file-tile--media-width);
+    // flex: 0 0 var(--file-tile--media-width);
+    height: 60px;
+    flex: 0 0 100px;
   }
 
   .card__subtitle {
@@ -34,8 +36,7 @@
   }
 }
 
-.file-tile--fullwidth {
+.file-tile--small {
-  max-width: none;
 }
 
 .file-tile__info {

src/renderer/scss/component/_form-field.scss

@@ -51,6 +51,10 @@
   width: 100%;
 }
 
+.form-field__input.form-field--no-padding {
+  padding: 0;
+}
+
 .form-field__input {
   display: flex;
   padding-top: $spacing-vertical / 3;
@@ -71,6 +75,10 @@
     width: 400px;
   }
 
+  input.input--toggle {
+    padding: 0;
+  }
+
   &.form-field--auto-height {
     height: auto;
   }

src/renderer/scss/component/_header.scss

@@ -6,9 +6,13 @@
   z-index: 1;
   justify-content: space-between;
   align-items: center;
-  padding: 0 $spacing-width;
+  padding: 0 $spacing-width * 1/3;
   background-color: var(--color-bg);
   box-shadow: var(--box-shadow-header);
+
+  @media (min-width: $medium-breakpoint) {
+    padding: 0 $spacing-width;
+  }
 }
 
 .header__navigation {

src/renderer/scss/component/_nav.scss

@@ -1,7 +1,7 @@
 .nav {
   width: var(--side-nav-width);
   background-color: var(--nav-bg-color);
-  padding: $spacing-width;
+  padding: $spacing-width * 1/3;
   color: var(--nav-color);
 
   hr {
@@ -11,8 +11,13 @@
     margin: $spacing-vertical $spacing-vertical * 2/3;
   }
 
+  @media (min-width: $medium-breakpoint) {
+    padding-left: $spacing-width;
+    width: calc(var(--side-nav-width) * 1.2);
+  }
+
   @media (min-width: $large-breakpoint) {
-    width: calc(var(--side-nav-width) * 1.1);
+    width: calc(var(--side-nav-width) * 1.4);
   }
 }