From f02fe2b60274259542d30af95a5011340d120fce Mon Sep 17 00:00:00 2001
From: Darko Tomic <darko.tomic@gmail.com>
Date: Wed, 1 Dec 2021 15:57:44 +0100
Subject: [PATCH] NHUB-38

---
 assets/styles/breakpoints.scss          |  8 ++++----
 assets/styles/index.scss                | 24 ++++++++++++++++++++---
 assets/wire/components/WireListItem.jsx | 26 +++++++++++++------------
 3 files changed, 39 insertions(+), 19 deletions(-)

diff --git a/assets/styles/breakpoints.scss b/assets/styles/breakpoints.scss
index 05ae90b45..3f3274d64 100644
--- a/assets/styles/breakpoints.scss
+++ b/assets/styles/breakpoints.scss
@@ -50,25 +50,25 @@
 }
 
 @mixin small_phone {
-    @media only screen and (orientation: portrait) and (max-width: 375px), (orientation: landscape) and (max-width: 576px) {
+    @media only screen and (orientation: portrait) and (max-width: 374px), (orientation: landscape) and (max-width: 575px) {
         @content;
     }
 }
 
 @mixin phone {
-    @media only screen and (orientation: portrait) and (max-width: 576px), (orientation: landscape) and (max-width: 992px) {
+    @media only screen and (orientation: portrait) and (max-width: 575px), (orientation: landscape) and (max-width: 991px) {
         @content;
     }
 }
 
 @mixin tablet {
-    @media only screen and (orientation: portrait) and (min-width: 577px) and (max-width: 1440px), (orientation: landscape) and (min-width: 993px) and (max-width: 1440px) {
+    @media only screen and (orientation: portrait) and (min-width: 576px) and (max-width: 1439px), (orientation: landscape) and (min-width: 992px) and (max-width: 1439px) {
         @content;
     }
 }
 
 @mixin pc {
-    @media only screen and (orientation: landscape) and (min-width: 1441px) {
+    @media only screen and (orientation: landscape) and (min-width: 1440px) {
         @content;
     }
 }
diff --git a/assets/styles/index.scss b/assets/styles/index.scss
index 19d326651..e6b495fcb 100644
--- a/assets/styles/index.scss
+++ b/assets/styles/index.scss
@@ -1500,6 +1500,9 @@ article.list {
             margin-bottom: 0;
         }
     }
+    .wire-articles__item-headline-inner {
+        align-items: center;
+    }
     .wire-articles__item__versions-btn {
         @include md {
             margin-left: auto;
@@ -1815,6 +1818,7 @@ article.list {
     font-weight: 700;
     margin-bottom: 0;
     line-height: 1.3;
+    display: flex;
 
     @include sm {
         font-size: 1rem;
@@ -1825,6 +1829,13 @@ article.list {
         margin: 0 4px 0 2px;
     }
 }
+.wire-articles__item-headline-inner {
+    margin-bottom: 4px;
+    @include sm {    
+        display: flex;
+        margin-bottom: 0;
+    }
+}
 .wire-articles__item-headline--indent {
     display: inline-block;
     text-indent: 30px;
@@ -1887,10 +1898,12 @@ article.list {
     flex-wrap: nowrap;
     margin-bottom: 0;
     margin-top: 0;
+    margin-left: 32px;
 
     @include sm {
         flex-wrap: wrap;
         margin-top: 10px;
+        margin-left: 0;
     }
     @include lg {
         margin-top: 0;
@@ -2123,9 +2136,14 @@ article.list {
         font-size: 1rem !important;
     }
 }
-
-.wire-articles__item__versions-btn button {
-    cursor: pointer;
+.wire-articles__item__versions-btn {
+    margin-left: 24px;
+    @include sm {
+        margin-left: 0;
+    }
+    button {
+        cursor: pointer;
+    }
 }
 
 .wire-articles__item__versions-btn--open {
diff --git a/assets/wire/components/WireListItem.jsx b/assets/wire/components/WireListItem.jsx
index 8c59112bc..58135ddd7 100644
--- a/assets/wire/components/WireListItem.jsx
+++ b/assets/wire/components/WireListItem.jsx
@@ -143,7 +143,7 @@ class WireListItem extends React.Component {
         );
         const selectClassName = classNames('no-bindable-select', {
             'wire-articles__item-select-visible': !LIST_ANIMATIONS,
-            'wire-articles__item-select float-left float-sm-none': LIST_ANIMATIONS,
+            'wire-articles__item-select': LIST_ANIMATIONS,
         });
         const picture = getPicture(item);
         const videos = getVideos(item);
@@ -188,17 +188,19 @@ class WireListItem extends React.Component {
                                     <i></i>
                                 </label>
                             </div>
-                            {!isExtended && (
-                                <WireListItemIcons
-                                    item={item}
-                                    picture={picture}
-                                    videos={videos}
-                                    divider={false}
-                                />
-                            )}
-                            <Embargo item={item} />
-                            <UrgencyLabel item={item} listConfig={listConfig} />
-                            {item.headline}
+                            <div className="wire-articles__item-headline-inner">
+                                {!isExtended && (
+                                    <WireListItemIcons
+                                        item={item}
+                                        picture={picture}
+                                        videos={videos}
+                                        divider={false}
+                                    />
+                                )}
+                                <Embargo item={item} />
+                                <UrgencyLabel item={item} listConfig={listConfig} />
+                                {item.headline}
+                            </div>
                         </h4>
 
                         {isExtended && !isMarketPlace && (