]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/commitdiff
Cleanup title-page CSS
authorChocobozzz <me@florianbigard.com>
Thu, 16 Jun 2022 14:10:12 +0000 (16:10 +0200)
committerChocobozzz <me@florianbigard.com>
Thu, 16 Jun 2022 14:16:51 +0000 (16:16 +0200)
27 files changed:
client/src/app/+about/about-instance/contact-admin-modal.component.html
client/src/app/+about/about.component.html
client/src/app/+accounts/accounts.component.html
client/src/app/+login/login.component.html
client/src/app/+login/login.component.scss
client/src/app/+remote-interaction/remote-interaction.component.html
client/src/app/+reset-password/reset-password.component.html
client/src/app/+reset-password/reset-password.component.scss
client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.html
client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.scss
client/src/app/+signup/+verify-account/verify-account-email/verify-account-email.component.html
client/src/app/+stats/video/video-stats.component.html
client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.html
client/src/app/+video-channels/video-channels.component.html
client/src/app/+video-studio/edit/video-studio-edit.component.html
client/src/app/+videos/+video-edit/shared/video-edit.component.scss
client/src/app/+videos/+video-edit/video-add.component.html
client/src/app/+videos/+video-edit/video-update.component.html
client/src/app/+videos/+video-watch/shared/comment/video-comments.component.html
client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.html
client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.scss
client/src/app/shared/shared-main/misc/top-menu-dropdown.component.html
client/src/app/shared/shared-share-modal/video-share.component.html
client/src/app/shared/shared-share-modal/video-share.component.scss
client/src/app/shared/shared-video-miniature/videos-list.component.scss
client/src/sass/class-helpers.scss
client/src/sass/primeng-custom.scss

index ed027af44512fc11962e240be8656773d71fc2ca..a14ba3a4ffe8c704d1a88f407fc85f380c15d13e 100644 (file)
@@ -53,7 +53,7 @@
       </div>
     </form>
 
-    <div *ngIf="!isContactFormEnabled()" class="alert alert-error" i18n>The contact form is not enabled on this instance.</div>
+    <div *ngIf="!isContactFormEnabled()" class="alert alert-danger" i18n>The contact form is not enabled on this instance.</div>
 
   </div>
 </ng-template>
index 3b7343a04b90c90bcb07b193e88983676c85e1b5..cf302e06136ef4bd1d64ea5062f1b3263ef325dc 100644 (file)
@@ -1,13 +1,10 @@
 <div>
   <div class="sub-menu" [ngClass]="{ 'sub-menu-fixed': !isBroadcastMessageDisplayed }">
+    <a myPluginSelector pluginSelectorId="about-menu-instance" i18n routerLink="instance" routerLinkActive="active" class="sub-menu-entry">Instance</a>
 
-    <div class="links">
-      <a myPluginSelector pluginSelectorId="about-menu-instance" i18n routerLink="instance" routerLinkActive="active" class="title-page title-page-about">Instance</a>
+    <a myPluginSelector pluginSelectorId="about-menu-peertube" i18n routerLink="peertube" routerLinkActive="active" class="sub-menu-entry">PeerTube</a>
 
-      <a myPluginSelector pluginSelectorId="about-menu-peertube" i18n routerLink="peertube" routerLinkActive="active" class="title-page title-page-about">PeerTube</a>
-
-      <a myPluginSelector pluginSelectorId="about-menu-network" i18n routerLink="follows" routerLinkActive="active" class="title-page title-page-about">Network</a>
-    </div>
+    <a myPluginSelector pluginSelectorId="about-menu-network" i18n routerLink="follows" routerLinkActive="active" class="sub-menu-entry">Network</a>
   </div>
 
   <div class="margin-content" [ngClass]="{ 'offset-content': !isBroadcastMessageDisplayed }">
index db045b046af3ecaa4ffc0ebc58d50bc41acbfe75..0be2271c74530794418dcd315a380cd3acb83d83 100644 (file)
@@ -66,7 +66,7 @@
 
   <div class="links" [ngClass]="{ 'on-channel-page': isOnChannelPage() }">
     <ng-template #linkTemplate let-item="item">
-      <a [routerLink]="item.routerLink" routerLinkActive="active" class="title-page">{{ item.label }}</a>
+      <a [routerLink]="item.routerLink" routerLinkActive="active" class="sub-menu-entry">{{ item.label }}</a>
     </ng-template>
 
     <my-list-overflow [hidden]="hideMenu" [items]="links" [itemTemplate]="linkTemplate"></my-list-overflow>
index 10e25a936a6be58b9ff44ee3a4bba5102915e268..834ea6e51cd359f8249760d91287b3134be9a118 100644 (file)
@@ -5,18 +5,7 @@
 </h1>
 
 <div class="margin-content">
-  <div class="alert alert-danger" i18n *ngIf="externalAuthError">
-    Sorry but there was an issue with the external login process. Please <a routerLink="/about">contact an administrator</a>.
-  </div>
-
   <ng-container *ngIf="!externalAuthError && !isAuthenticatedWithExternalAuth">
-    <div *ngIf="error" class="alert alert-danger">
-      {{ error }}
-
-      <span *ngIf="error === 'User email is not verified.'">
-        <a i18n routerLink="/verify-account/ask-send-email">Request new verification email.</a>
-      </span>
-    </div>
 
     <div class="alert pt-alert-primary" role="alert">
       <h5 class="alert-heading" i18n>
       </p>
     </div>
 
+    <div class="alert alert-danger" i18n *ngIf="externalAuthError">
+      Sorry but there was an issue with the external login process. Please <a class="link-orange" routerLink="/about">contact an administrator</a>.
+    </div>
+
+    <div *ngIf="error" class="alert alert-danger">
+      {{ error }}
+
+      <a *ngIf="error === 'User email is not verified.'" class="ms-1 link-orange" i18n routerLink="/verify-account/ask-send-email">
+        Request new verification email
+      </a>
+    </div>
+
     <div class="wrapper">
       <div class="login-form-and-externals">
 
index 79a2081fe6a61f58f022d6fdb8ca46c12e329ae0..d31d428f70f0ef0f6cee85c62d06dc510b945e6f 100644 (file)
@@ -51,11 +51,11 @@ input[type=email] {
 }
 
 .wrapper,
-.pt-alert-primary {
+.alert {
   max-width: 1200px;
 }
 
-.pt-alert-primary {
+.alert {
   margin: 0 auto 30px;
 }
 
index e59783b9a25fe12b869ce237bb88c9185d632b98..135ddc00b52027a848475c552855254dbbc86b00 100644 (file)
@@ -1,7 +1,5 @@
 <div class="root">
 
-  <div class="alert alert-error" *ngIf="error">
-    {{ error }}
-  </div>
+  <div class="alert alert-danger" *ngIf="error">{{ error }}</div>
 
 </div>
index 1910ebd15be8f0bff06ce12a5855901656226017..1308735932163f0abcf3e3f64a57f77ce66afc60 100644 (file)
@@ -1,31 +1,32 @@
 <div class="margin-content">
-  <div i18n class="title-page title-page-single">
-    Reset my password
-  </div>
+  <h1 i18n class="title-page">Reset my password</h1>
 
   <form role="form" (ngSubmit)="resetPassword()" [formGroup]="form">
     <div class="form-group">
       <label i18n for="password">Password</label>
-      <my-input-text formControlName="password" inputId="password"
-                              i18n-placeholder placeholder="Password"
-                              [ngClass]="{ 'input-error': formErrors['password'] }"
-                              autocomplete="new-password"></my-input-text>
-      <div *ngIf="formErrors.password" class="form-error">
-        {{ formErrors.password }}
-      </div>
+
+      <my-input-text
+        formControlName="password" inputId="password" i18n-placeholder placeholder="Password"
+        [ngClass]="{ 'input-error': formErrors['password'] }" autocomplete="new-password"
+      ></my-input-text>
+
+      <div *ngIf="formErrors.password" class="form-error">{{ formErrors.password }}</div>
     </div>
 
     <div class="form-group">
       <label i18n for="password-confirm">Confirm password</label>
-      <my-input-text formControlName="password-confirm" inputId="password-confirm"
-                              i18n-placeholder placeholder="Confirmed password"
-                              [ngClass]="{ 'input-error': formErrors['password-confirm'] }"
-                              autocomplete="new-password"></my-input-text>
-      <div *ngIf="formErrors['password-confirm']" class="form-error">
-        {{ formErrors['password-confirm'] }}
-      </div>
+
+      <my-input-text
+        formControlName="password-confirm" inputId="password-confirm" i18n-placeholder placeholder="Confirmed password"
+        [ngClass]="{ 'input-error': formErrors['password-confirm'] }" autocomplete="new-password"
+      ></my-input-text>
+
+      <div *ngIf="formErrors['password-confirm']" class="form-error">{{ formErrors['password-confirm'] }}</div>
     </div>
 
-    <input type="submit" i18n-value value="Reset my password" [disabled]="!form.valid || !isConfirmedPasswordValid()">
+    <input
+      class="peertube-button orange-button" type="submit" i18n-value value="Reset my password"
+      [disabled]="!form.valid || !isConfirmedPasswordValid()"
+    >
   </form>
 </div>
index 5494e29c6fa6a1460687e22708185d9a2dbeeb04..dd981ca398d0824e28377389e1823b035a331ba6 100644 (file)
@@ -1,12 +1,7 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-input:not([type=submit]) {
-  @include peertube-input-text(340px);
+my-input-text {
+  max-width: 340px;
   display: block;
 }
-
-input[type=submit] {
-  @include peertube-button;
-  @include orange-button;
-}
index ece9d102278a4555d2e97d0460ad8bad057c76e4..023082f615c94f4ff04453b44b7063b8734803b0 100644 (file)
@@ -1,21 +1,21 @@
 <div class="margin-content">
-  <div i18n class="title-page title-page-single">
-    Request email for account verification
-  </div>
+  <h1 i18n class="title-page">Request email for account verification</h1>
 
   <form *ngIf="requiresEmailVerification; else emailVerificationNotRequired" role="form" (ngSubmit)="askSendVerifyEmail()" [formGroup]="form">
     <div class="form-group">
       <label i18n for="verify-email-email">Email</label>
+
       <input
         type="email" id="verify-email-email" i18n-placeholder placeholder="Email address" required
         formControlName="verify-email-email" class="form-control" [ngClass]="{ 'input-error': formErrors['verify-email-email'] }"
       >
-      <div *ngIf="formErrors['verify-email-email']" class="form-error">
-          {{ formErrors['verify-email-email'] }}
-      </div>
+
+      <div *ngIf="formErrors['verify-email-email']" class="form-error">{{ formErrors['verify-email-email'] }}</div>
     </div>
-    <input type="submit" i18n-value value="Send verification email" [disabled]="!form.valid">
+
+    <input class="peertube-button orange-button" type="submit" i18n-value value="Send verification email" [disabled]="!form.valid">
   </form>
+
   <ng-template #emailVerificationNotRequired>
     <div i18n>This instance does not require email verification.</div>
   </ng-template>
index 5494e29c6fa6a1460687e22708185d9a2dbeeb04..c542f3d8a5329321ca0b46f46ace31869cca0e59 100644 (file)
@@ -1,12 +1,8 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-input:not([type=submit]) {
+input[type=email] {
   @include peertube-input-text(340px);
-  display: block;
-}
 
-input[type=submit] {
-  @include peertube-button;
-  @include orange-button;
+  display: block;
 }
index 327e23f3f02b09c1e066038c6eef737061628f74..122f3c28cecc64a98ac6d20a3fc711748c6ea3f1 100644 (file)
@@ -1,18 +1,14 @@
 <div class="margin-content">
-  <div i18n class="title-page title-page-single">
-    Verify account email confirmation
-  </div>
+  <h1 i18n class="title-page">Verify account email confirmation</h1>
 
   <my-signup-success i18n *ngIf="!isPendingEmail && success" [requiresEmailVerification]="false">
   </my-signup-success>
 
-  <div i18n class="alert alert-success" *ngIf="isPendingEmail && success">
-    Email updated.
-  </div>
+  <div i18n class="alert alert-success" *ngIf="isPendingEmail && success">Email updated.</div>
 
-  <div *ngIf="failed">
+  <div class="alert alert-danger" *ngIf="failed">
     <span i18n>An error occurred.</span>
 
-    <a i18n routerLink="/verify-account/ask-send-email" [queryParams]="{ isPendingEmail: isPendingEmail }">Request new verification email.</a>
+    <a i18n class="ms-1 link-orange" routerLink="/verify-account/ask-send-email" [queryParams]="{ isPendingEmail: isPendingEmail }">Request new verification email</a>
   </div>
 </div>
index adfe095a3b324be762f1d778234736fd3a07831d..242a5a7a215848a1df6d46d76993a15373c7b6f1 100644 (file)
@@ -1,5 +1,5 @@
 <div class="margin-content">
-  <h1 class="title-page title-page-single" i18n>{{ video.name }}</h1>
+  <h1 class="title-page" i18n>{{ video.name }}</h1>
 
   <div class="stats-embed">
     <div class="global-stats">
index fa58963ce2d4d76f94085d1ce7dffd48a19f3122..dd0b10d665315307963a872c54ab7efe02b0706f 100644 (file)
@@ -1,7 +1,7 @@
 <div class="margin-content">
-  <div i18n class="title-page title-page-single" *ngIf="pagination.totalItems">
+  <h1 i18n class="title-page" *ngIf="pagination.totalItems">
     Created {pagination.totalItems, plural, =1 {1 playlist} other {{{ pagination.totalItems }} playlists}}
-  </div>
+  </h1>
 
   <div i18n class="no-results" *ngIf="pagination.totalItems === 0">This channel does not have playlists.</div>
 
index 1b9dbe7b911ca06498ecde3dc3b20de4fedd7969..0fe6e808a4de5c4ca6c5b684d0272da66be75d87 100644 (file)
 
   <div class="links">
     <ng-template #linkTemplate let-item="item">
-      <a [routerLink]="item.routerLink" routerLinkActive="active" class="title-page">{{ item.label }}</a>
+      <a [routerLink]="item.routerLink" routerLinkActive="active" class="sub-menu-entry">{{ item.label }}</a>
     </ng-template>
 
     <my-list-overflow [items]="links" [itemTemplate]="linkTemplate"></my-list-overflow>
index acfc1a452f84b30eabebf3524a6dcbbd43572093..fe74062d2cd50b00ece693c183ccb0f7c99b3efb 100644 (file)
@@ -1,5 +1,5 @@
 <div class="margin-content">
-  <h1 class="title-page title-page-single" i18n>Studio for {{ video.name }}</h1>
+  <h1 class="title-page" i18n>Studio for {{ video.name }}</h1>
 
   <div class="columns">
     <form role="form" [formGroup]="form">
index 770a0f58542c202db6d6e5310e9708f99892da5f..e8a6c6e420d00cbfd7fd40527957f1679dbb54bd 100644 (file)
@@ -5,15 +5,6 @@
   @include peertube-select-container(auto);
 }
 
-.title-page a {
-  color: pvar(--mainForegroundColor);
-
-  &:hover {
-    text-decoration: none;
-    opacity: .8;
-  }
-}
-
 my-peertube-checkbox {
   display: block;
   margin-bottom: 1rem;
index 29cf08e75848a5fe9167f617e7f25a0b90b3a237..27ad14d63842e44c75e4581caa96e331e9df215c 100644 (file)
@@ -40,7 +40,7 @@
 <div *ngIf="!user.isUploadDisabled()" class="margin-content">
   <my-user-quota *ngIf="!isInSecondStep() || secondStepType === 'go-live'" [user]="user" [userInformationLoaded]="userInformationLoaded"></my-user-quota>
 
-  <div class="title-page title-page-single" *ngIf="isInSecondStep()">
+  <div class="title-page" *ngIf="isInSecondStep()">
     <ng-container *ngIf="secondStepType === 'import-url' || secondStepType === 'import-torrent'" i18n>Import {{ videoName }}</ng-container>
     <ng-container *ngIf="secondStepType === 'upload'" i18n>Upload {{ videoName }}</ng-container>
   </div>
index 446406d1aff555d952ca8d25f065208252fc33b4..6a32f1477995632015b5028f9774d24f301c7e00 100644 (file)
@@ -1,5 +1,5 @@
 <div class="margin-content">
-  <div class="title-page title-page-single">
+  <div class="title-page">
     <span class="me-1" i18n>Update</span>
     <a [routerLink]="getVideoUrl()">{{ video?.name }}</a>
   </div>
index a54df97cdfb54ab01802ef55fa05e36dacd7617e..e27942e665ac99d665351dbb22969074d2566702 100644 (file)
@@ -1,6 +1,6 @@
 <div>
   <div class="title-block">
-    <h2 class="title-page title-page-single">
+    <h2 class="title-page">
       {totalNotDeletedComments, plural, =0 {Comments} =1 {1 Comment} other {{{totalNotDeletedComments}} Comments}}
     </h2>
 
index e493ad8d7cf6b7b9fdc7ed81176ad446276a4c29..5ac801622078c94c2acbd7850caa32873fcc03ae 100644 (file)
@@ -1,9 +1,8 @@
 <div class="other-videos" [ngClass]="{ 'display-as-row': displayAsRow }">
   <ng-container *ngIf="hasVideos$ | async">
     <div class="title-page-container">
-      <h2 i18n class="title-page title-page-single">
-        Other videos
-      </h2>
+      <h2 i18n class="title-page">Other videos</h2>
+
       <div *ngIf="!playlist" class="title-page-autoplay"
         [ngbTooltip]="autoPlayNextVideoTooltip" placement="bottom-right auto"
       >
index 784d0e9617219484d8a9e2cf78dd571261971950..5b1bf9cab38766afdd8cfb0bccab0890ffbd313b 100644 (file)
@@ -8,18 +8,14 @@
   margin-bottom: 25px;
   flex-wrap: wrap-reverse;
 
-  .title-page.active,
-  .title-page.title-page-single {
+  .title-page {
     @include margin-right(.5rem !important);
 
     margin-bottom: unset;
+    margin-top: 0;
   }
 }
 
-.title-page {
-  margin-top: 0;
-}
-
 .title-page-autoplay {
   @include margin-left(auto);
 
index d884e75b2b8bad6f3737d93cfeb40aeb4a171922..d96fdbdc6d6335875ab4fd4608413d1ec8532193 100644 (file)
@@ -1,7 +1,13 @@
 <div class="sub-menu" [ngClass]="{ 'sub-menu-fixed': !isBroadcastMessageDisplayed, 'no-scroll': isModalOpened }">
   <ng-container *ngFor="let menuEntry of menuEntries; index as id">
 
-    <a *ngIf="menuEntry.routerLink && isDisplayed(menuEntry)" [routerLink]="menuEntry.routerLink" routerLinkActive="active" class="title-page title-page-settings" #routerLink (click)="onActiveLinkScrollToTop(routerLink)">{{ menuEntry.label }}</a>
+    <a
+      *ngIf="menuEntry.routerLink && isDisplayed(menuEntry)" class="sub-menu-entry"
+      [routerLink]="menuEntry.routerLink" routerLinkActive="active" #routerLink
+      (click)="onActiveLinkScrollToTop(routerLink)"
+    >
+      {{ menuEntry.label }}
+    </a>
 
     <div *ngIf="!menuEntry.routerLink && isDisplayed(menuEntry)" ngbDropdown class="parent-entry"
       #dropdown="ngbDropdown" autoClose="true" container="body">
@@ -10,7 +16,7 @@
         tabindex=0
         [ngClass]="{ active: !!suffixLabels[menuEntry.label] }"
         (click)="openModal(id)" (keydown.enter)="openModal(id)"
-        role="button" class="title-page title-page-settings">
+        role="button" class="sub-menu-entry">
         <ng-container i18n>{{ menuEntry.label }}</ng-container>
       </span>
 
@@ -19,7 +25,7 @@
         tabindex=0
         [ngClass]="{ active: !!suffixLabels[menuEntry.label] }" ngbDropdownAnchor
         (click)="dropdownAnchorClicked(dropdown)" (keydown.enter)="dropdownAnchorClicked(dropdown)"
-        role="button" class="title-page title-page-settings"
+        role="button" class="sub-menu-entry"
       >
         <ng-container i18n>{{ menuEntry.label }}</ng-container>
       </span>
index 1b99a6c1eaba62874ec7b09c95ff8aa0d80dc7e2..b163d358110deb2d55ba41614a8e546c4944bd0f 100644 (file)
@@ -8,7 +8,7 @@
   <div class="modal-body">
 
     <div class="playlist" *ngIf="playlist">
-      <div class="title-page title-page-single" i18n *ngIf="video">Share the playlist</div>
+      <h5 i18n *ngIf="video">Share the playlist</h5>
 
       <div *ngIf="isPrivatePlaylist()" class="alert-private alert alert-warning">
         <div i18n>This playlist is private so you won't be able to share it with external users</div>
@@ -85,7 +85,7 @@
 
 
     <div class="video" *ngIf="video">
-      <div class="title-page title-page-single" *ngIf="playlist" i18n>Share the video</div>
+      <h5 *ngIf="playlist" i18n>Share the video</h5>
 
       <div *ngIf="isPrivateVideo()" class="alert-private alert alert-warning">
         <div i18n>This video is private so you won't be able to share it with external users</div>
index 456309d2d47770cac51a95fba3f48c71524e5540..6e80f8c76db6def5cb3921ad96903235646f0a83 100644 (file)
@@ -5,10 +5,6 @@ my-input-text {
   width: 100%;
 }
 
-.title-page.title-page-single {
-  margin-top: 0;
-}
-
 .playlist {
   margin-bottom: 50px;
 }
@@ -80,3 +76,7 @@ my-input-text {
   align-items: center;
   justify-content: space-between;
 }
+
+h5 {
+  font-size: 1.15rem;
+}
index 5e3df5a984ec77189b1675a4688bd071605092f0..fb9dcafb884e94d34cda9d0398a4df1c44b01c0d 100644 (file)
@@ -99,11 +99,5 @@ $margin-top: 30px;
     align-items: center;
     height: auto;
     margin-bottom: 10px;
-
-    .title-page {
-      @include margin-right(0);
-
-      margin-bottom: 10px;
-    }
   }
 }
index d4277e4cdbf9909f8b0d3963edf7c86970a98533..4a04cabbaf117e0e6b35439d3f8c36c2cb2f1a27 100644 (file)
@@ -98,7 +98,7 @@ label + .form-group-description {
 // ---------------------------------------------------------------------------
 
 
-.title-page {
+.sub-menu-entry {
   @include disable-default-a-behaviour;
   @include margin-right(55px);
 
@@ -107,20 +107,13 @@ label + .form-group-description {
   display: inline-block;
   font-weight: $font-semibold;
   border-bottom: 2px solid transparent;
-
-  &.title-page-single {
-    margin-top: 30px;
-    margin-bottom: 25px;
-  }
+  white-space: nowrap;
+  font-size: 1rem;
 
   &.active {
     border-bottom-color: pvar(--mainColor);
   }
 
-  &.title-page-single {
-    font-size: 125%;
-  }
-
   &:hover,
   &:active,
   &:focus {
@@ -130,8 +123,7 @@ label + .form-group-description {
   &.active,
   &:hover,
   &:active,
-  &:focus,
-  &.title-page-single {
+  &:focus {
     opacity: 1;
     outline: 0 hidden !important;
   }
@@ -147,10 +139,31 @@ label + .form-group-description {
   padding: 35px 25px;
 }
 
-.title-page-about,
-.title-page-settings {
-  white-space: nowrap;
-  font-size: 1rem;
+.title-page {
+  @include margin-right(55px);
+
+  margin-top: 30px;
+  margin-bottom: 25px;
+
+  color: pvar(--mainForegroundColor);
+  display: inline-block;
+  font-weight: $font-semibold;
+  font-size: 1.25rem;
+
+  a {
+    @include disable-default-a-behaviour;
+
+    color: inherit;
+
+    &:hover {
+      color: inherit;
+      opacity: 0.8;
+    }
+  }
+
+  @media screen and (max-width: $mobile-view) {
+    @include margin-left(15px);
+  }
 }
 
 .admin-sub-header {
index 061d626d8704c5e10277cd68f0abc84df42e0655..37e7a4275bfef9be2e7021f6a33db2523d48142b 100644 (file)
@@ -882,15 +882,17 @@ p-toast {
       padding: 10px 20px;
 
       .message {
-        flex-grow: 1;
         @include margin-right(20px);
 
+        flex-grow: 1;
+
         h3 {
           font-size: 21px;
         }
 
         p {
-          font-size: 16px;
+          @include peertube-word-wrap;
+
           margin-bottom: 0;
         }
       }