From 3d398f23ed04f9d0d14509588c2ed1f8d7494651 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Wed, 29 Apr 2020 18:40:24 +0700
Subject: [PATCH] fixed node title on mobiles

---
 src/components/node/NodePanelInner/index.tsx  | 61 +++++++++----------
 .../node/NodePanelInner/styles.scss           | 39 ++++++++----
 2 files changed, 58 insertions(+), 42 deletions(-)

diff --git a/src/components/node/NodePanelInner/index.tsx b/src/components/node/NodePanelInner/index.tsx
index 98d24999..0766220b 100644
--- a/src/components/node/NodePanelInner/index.tsx
+++ b/src/components/node/NodePanelInner/index.tsx
@@ -43,46 +43,45 @@ const NodePanelInner: FC<IProps> = memo(
     return (
       <div className={classNames(styles.wrap, { stack })}>
         <div className={styles.content}>
-          <Group horizontal className={styles.panel}>
-            <Filler>
-              <div className={styles.title}>
-                {is_loading ? <Placeholder width="40%" /> : title || '...'}
-              </div>
-              {user && user.username && (
-                <div className={styles.name}>
-                  {is_loading ? (
-                    <Placeholder width="100px" />
-                  ) : (
-                    `~${user.username}, ${getPrettyDate(created_at)}`
-                  )}
-                </div>
-              )}
-            </Filler>
-          </Group>
+          <div className={styles.panel}>
+            <div className={styles.title}>
+              {is_loading ? <Placeholder width="40%" /> : title || '...'}
+            </div>
 
-          <div className={styles.buttons}>
-            {can_star && (
-              <div className={classNames(styles.star, { is_heroic })}>
-                {is_heroic ? (
-                  <Icon icon="star_full" size={24} onClick={onStar} />
+            {user && user.username && (
+              <div className={styles.name}>
+                {is_loading ? (
+                  <Placeholder width="100px" />
                 ) : (
-                  <Icon icon="star" size={24} onClick={onStar} />
+                  `~${user.username}, ${getPrettyDate(created_at)}`
                 )}
               </div>
             )}
+          </div>
 
-            {can_edit && (
-              <>
-                <div>
-                  <Icon icon={deleted_at ? 'locked' : 'unlocked'} size={24} onClick={onLock} />
+          {can_edit && (
+            <div className={styles.editor_buttons}>
+              {can_star && (
+                <div className={classNames(styles.star, { is_heroic })}>
+                  {is_heroic ? (
+                    <Icon icon="star_full" size={24} onClick={onStar} />
+                  ) : (
+                    <Icon icon="star" size={24} onClick={onStar} />
+                  )}
                 </div>
+              )}
 
-                <div>
-                  <Icon icon="edit" size={24} onClick={onEdit} />
-                </div>
-              </>
-            )}
+              <div>
+                <Icon icon={deleted_at ? 'locked' : 'unlocked'} size={24} onClick={onLock} />
+              </div>
 
+              <div>
+                <Icon icon="edit" size={24} onClick={onEdit} />
+              </div>
+            </div>
+          )}
+
+          <div className={styles.buttons}>
             {can_like && (
               <div className={classNames(styles.like, { is_liked })}>
                 {is_liked ? (
diff --git a/src/components/node/NodePanelInner/styles.scss b/src/components/node/NodePanelInner/styles.scss
index c857f116..e6dbba88 100644
--- a/src/components/node/NodePanelInner/styles.scss
+++ b/src/components/node/NodePanelInner/styles.scss
@@ -8,6 +8,7 @@
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
+  min-width: 0;
 
   &:global(.stack) {
     padding: 0 $gap;
@@ -31,14 +32,13 @@
   padding: $gap $gap;
   background: $node_bg;
   height: 64px;
+  min-width: 0;
 
   @include outer_shadow();
 
   @include tablet {
     border-radius: 0;
-    // flex-direction: column;
-    // align-items: flex-start;
-    height: 128px;
+    height: auto;
   }
 
   @include can_backdrop {
@@ -50,20 +50,25 @@
 .title {
   text-transform: uppercase;
   font: $font_24_semibold;
-  // height: 24px;
-  // padding-bottom: 6px;
+  overflow: hidden;
+  flex: 1;
+  text-overflow: ellipsis;
 
   @include tablet {
-    // font-size: 16px;
-    word-break: break-word;
+    white-space: nowrap;
     padding-bottom: 0;
-    padding-top: 10px;
+    font: $font_16_semibold;
   }
 }
 
 .name {
   font: $font_14_regular;
   color: transparentize(white, 0.5);
+  text-transform: lowercase;
+
+  @include tablet {
+    font: $font_12_regular;
+  }
 }
 
 .btn {
@@ -77,9 +82,11 @@
 
 .panel {
   flex: 1;
+  min-width: 0;
 }
 
-.buttons {
+.buttons,
+.editor_buttons {
   flex: 0;
   padding-right: $gap;
   fill: transparentize(white, 0.7);
@@ -119,18 +126,28 @@
     &:first-child {
       margin-left: 0;
     }
+  }
 
+  @include tablet {
+    align-self: center;
+  }
+}
+
+.buttons {
+  & > * {
     &:last-child {
       margin-right: 0;
+
       &::after {
         display: none;
       }
     }
   }
+}
 
+.editor_buttons {
   @include tablet {
-    margin-top: $gap * 2;
-    align-self: center;
+    display: none;
   }
 }