From ae86f5df6398f307567153ba6bfc02c8a06c0cc5 Mon Sep 17 00:00:00 2001
From: toshikanneko <raphael.wickihalder@protonmail.com>
Date: Tue, 15 Feb 2022 09:25:07 +0100
Subject: [PATCH] Fix items tab on list publish page on desktop

---
 ui/component/collectionEdit/view.jsx |  2 +-
 ui/scss/init/_gui.scss               | 51 ++++++++++++++++++++++++----
 2 files changed, 45 insertions(+), 8 deletions(-)

diff --git a/ui/component/collectionEdit/view.jsx b/ui/component/collectionEdit/view.jsx
index 6c87d3f61..26d4eb22d 100644
--- a/ui/component/collectionEdit/view.jsx
+++ b/ui/component/collectionEdit/view.jsx
@@ -310,7 +310,7 @@ function CollectionForm(props: Props) {
 
   return (
     <>
-      <div className={classnames('main--contained', { 'card--disabled': disabled })}>
+      <div className={classnames('main--contained publishList-wrapper', { 'card--disabled': disabled })}>
         <Tabs>
           <TabList className="tabs__list--collection-edit-page">
             <Tab>{__('General')}</Tab>
diff --git a/ui/scss/init/_gui.scss b/ui/scss/init/_gui.scss
index 50edf14ec..26bf4ea3c 100644
--- a/ui/scss/init/_gui.scss
+++ b/ui/scss/init/_gui.scss
@@ -809,13 +809,6 @@ img {
 }
 
 .playlistPage-wrapper {
-  /*
-  .button--file-action {
-    &:hover {
-      background-color: unset;
-    }
-  }*/
-
   .card-stack:first-of-type {
     .card {
       margin-bottom: var(--spacing-l);
@@ -941,6 +934,50 @@ img {
   }
 }
 
+.publishList-wrapper {
+  @media (min-width: $breakpoint-small) {
+    .claim-preview--collection-mine {
+      height: unset;
+      padding-left: 9rem;
+      position: relative;
+
+      .media__thumb {
+        position: relative;
+        right: unset;
+
+        .claim-preview__hover-actions {
+          display: visible;
+        }
+      }
+
+      .claim-preview__text {
+        position: unset;
+        right: unset;
+        width: 100%;
+        background-color: unset;
+        padding: 0;
+        border-radius: unset;
+
+        .claim-preview-info {
+          .claim-preview__title {
+            font-size: var(--font-small);
+          }
+        }
+        .media__subtitle {
+          .button__content {
+            .channel-name {
+              font-size: var(--font-xsmall);
+            }
+          }
+        }
+      }
+    }
+    .button-dislike {
+      margin-right: 0;
+    }
+  }
+}
+
 .repost-wrapper {
   .claim-preview__wrapper {
     background-color: rgba(var(--color-header-background-base), 0.6);