html page's responsive

src/component/Input/TextAreaApp/TextAreaApp.styl

@@ -7,6 +7,7 @@
   display flex
   flex-direction column
   align-items center
+  width auto
   &__text
     margin-bottom 25px
     width 100%

src/component/PopinFixed/PopinFixed.styl

@@ -31,10 +31,8 @@
       color white
       font-size 20px
       cursor pointer
-      &:hover, &:focus
-        border 1px solid off-white
-        padding 0 10px
-        border-radius 5px
+      .fa-pencil
+        color off-white
     &__close
       border 1px solid white
       border-radius 5px
@@ -56,19 +54,48 @@
     &__menu
       display flex
       align-items center
+      &__addversion
+        display flex
+        align-items center
       &__action
         margin 5px 10px 0 0
         font-size 18px
         cursor pointer
         &:hover , &:focus
-          font-size 22px
           color blue
   &__content
     display flex
-    flex-flow row
+    flex-wrap wrap
     // 209 = wsContentGeneric:top wsContentGeneric__header:height - wsContentGeneric__option:height
     height calc(100% - 209px)
     &__left
       width 55%
     &__right
       width 45%
+
+@media (min-width: min-sm) and (max-width: max-lg)
+
+  .wsContentGeneric__content
+    overflow-Y auto
+    &__left
+      width 100%
+      margin-bottom 50px
+    &__right
+      width 100%
+
+@media (min-width: min-sm) and (max-width: max-sm)
+
+  .wsContentGeneric
+    top 70px
+
+@media (max-width: max-xs)
+
+  .wsContentGeneric
+    top 70px
+    &__content
+      overflow-Y auto
+      &__left
+        width 100%
+        margin-bottom 50px
+      &__right
+        width 100%

src/component/PopinFixed/PopinFixedOption.jsx

@@ -11,17 +11,17 @@ const PopinFixedOption = props => {
   return (
     <div className={classnames('wsContentGeneric__option', `${props.customClass}__option`)}>
       <div className={classnames('wsContentGeneric__option__menu', `${props.customClass}__option__menu`)}>
-        <div className='wsContentGeneric__option__menu__addversion btn mr-auto'>
+        <div className='wsContentGeneric__option__menu__addversion btn btn-outline-primary mr-auto'>
           {props.t('PopinFixedOption.new_version')}
-          <i className='fa fa-plus-circle' />
+          <i className='fa fa-plus-circle ml-3' />
         </div>
 
         <SelectStatus />
 
-        <div className={classnames('wsContentGeneric__option__menu__action', `${props.customClass}__option__menu__action`)}>
+        <div className={classnames('wsContentGeneric__option__menu__action d-none d-sm-block', `${props.customClass}__option__menu__action`)}>
           <i className='fa fa-archive' />
         </div>
-        <div className={classnames('wsContentGeneric__option__menu__action', `${props.customClass}__option__menu__action`)}>
+        <div className={classnames('wsContentGeneric__option__menu__action d-none d-sm-block', `${props.customClass}__option__menu__action`)}>
           <i className='fa fa-trash' />
         </div>
       </div>

src/component/Timeline/Timeline.jsx

@@ -72,7 +72,7 @@ const Timeline = props => {
 
       <form className={classnames(`${props.customClass}__texteditor`, 'timeline__texteditor')}>
         <div
-          className={classnames(`${props.customClass}__texteditor__simpletext`, 'timeline__texteditor__simpletext input-group')}>
+          className={classnames(`${props.customClass}__texteditor__simpletext`, 'timeline__texteditor__simpletext input-group d-inline-flex d-sm-inline-flex d-md-inline-flex d-lg-none')}>
           <input
             type='text'
             className={classnames(`${props.customClass}__texteditor__simpletext__input`, 'timeline__texteditor__simpletext__input form-control')}
@@ -83,10 +83,10 @@ const Timeline = props => {
             <i className='fa fa-font' />
           </div>
         </div>
-        <div className={classnames(`${props.customClass}__texteditor__wysiwyg`, 'timeline__texteditor__wysiwyg d-none d-xl-block')}>
+        <div className={classnames(`${props.customClass}__texteditor__wysiwyg`, 'timeline__texteditor__wysiwyg d-none d-lg-block')}>
           <textarea />
         </div>
-        <div className={classnames(`${props.customClass}__texteditor__submit`, 'timeline__texteditor__submit d-xl-flex justify-content-xl-center')}>
+        <div className={classnames(`${props.customClass}__texteditor__submit`, 'timeline__texteditor__submit d-inline-flex d-lg-flex justify-content-lg-center')}>
           <button
             type='submit'
             className={classnames(`${props.customClass}__texteditor__submit__btn`, 'timeline__texteditor__submit__btn btn')}

src/component/Timeline/Timeline.styl

@@ -70,7 +70,6 @@
     &__simpletext
       display none
       width 70%
-      margin-right 35px
       &__icon
         cursor pointer
     &__wysiwyg
@@ -106,11 +105,6 @@
   .timeline__messagelist__item
     margin-right 55px
 
-  .received
-    .timeline__messagelist__item
-      &__avatar
-        left 96%
-
 /**** MEDIA 768px & 991px ****/
 
 @media (min-width: min-md) and (max-width: max-md)
@@ -118,11 +112,6 @@
   .timeline__messagelist__item
     margin-right 55px
 
-  .received
-    .timeline__messagelist__item
-      &__avatar
-        left 96%
-
 /**** MEDIA 576px & 767px ****/
 
 @media (min-width: min-sm) and (max-width: max-sm)
@@ -130,16 +119,13 @@
   .timeline__messagelist__item
     margin-right 35px
 
-  .received
-    .timeline__messagelist__item
-      &__avatar
-        left 94%
-
 /**** MEDIA 575px ****/
 
 @media (max-width: max-xs)
 
-  .received
-    .timeline__messagelist__item
-      &__avatar
-        left 90%
+  .timeline__texteditor
+    &__simpletext
+      margin-left 0
+      width 65%
+    &__submit
+      margin-left 10px