Use grid to organise settings in admin, my-account

[github/Chocobozzz/PeerTube.git] / client / src / app / +video-channels / video-channels.component.scss

diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss
index 50b69e7acf7e1489d523b3904db63aa57a125a4c..6470629f853d200beb805158b52f39d25cc515b9 100644 (file)
--- a/client/src/app/+video-channels/video-channels.component.scss
+++ b/client/src/app/+video-channels/video-channels.component.scss
@@ -8,6 +8,21 @@
     width: 100%;
   }
 
+  .actor-info {
+    display: grid !important;
+    grid-template-columns: 1fr auto;
+    grid-template-rows: 1fr auto / 1fr auto;
+    grid-template-areas: "name buttons" "lower buttons";
+
+    @media screen and (max-width: #{map-get($grid-breakpoints, lg)}) {
+      grid-template-areas: "name name" "lower buttons";
+    }
+  }
+
+  .actor-names {
+    grid-area: name;
+  }
+
   .actor-name {
     flex-grow: 1;
 
@@ -25,6 +40,9 @@
   margin-left: auto;
   margin-top: 20px;
 
+  grid-row: buttons-start / span buttons-end;
+  grid-column: buttons-start;
+
   a {
     @include peertube-button-outline;
     line-height: 1.8;
@@ -33,4 +51,4 @@
   my-subscribe-button {
     height: min-content;
   }
-}
\ No newline at end of file
+}