Merge pull request deriv-com#24 from khalid-deriv/p2p

Letting the overflowing text in filter modal know who is the boss
khalid-deriv · Feb 18, 2022 · e5b221b · e5b221b
2 parents 61ae5c3 + 0489859
commit e5b221b
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 7 deletions.
diff --git a/packages/p2p/src/components/buy-sell/filter-modal/filter-modal.jsx b/packages/p2p/src/components/buy-sell/filter-modal/filter-modal.jsx
@@ -91,7 +91,10 @@ const FilterModal = () => {
                     </React.Fragment>
                 ) : (
                     <React.Fragment>
-                        <div className='filter-modal__row'>
+                        <div
+                            className='filter-modal__row filter-modal__select'
+                            onClick={() => buy_sell_store.setShowFilterPaymentMethods(true)}
+                        >
                             <div className='filter-modal__column'>
                                 <Text color='prominent' size='xs'>
                                     <Localize i18n_default_text='Payment methods' />
@@ -101,16 +104,16 @@ const FilterModal = () => {
                                         <Localize i18n_default_text='All' />
                                     </Text>
                                 ) : (
-                                    <Text color='less-prominent' size='xs'>
+                                    <Text
+                                        className='filter-modal__selected-payment-methods'
+                                        color='less-prominent'
+                                        size='xs'
+                                    >
                                         {selected_methods_text.join(', ')}
                                     </Text>
                                 )}
                             </div>
-                            <Icon
-                                icon='IcChevronRight'
-                                onClick={() => buy_sell_store.setShowFilterPaymentMethods(true)}
-                                size={18}
-                            />
+                            <Icon className='filter-modal__arrow' icon='IcChevronRight' size={18} />
                         </div>
                         <div className='filter-modal__row'>
                             <div className='filter-modal__column'>

diff --git a/packages/p2p/src/components/buy-sell/filter-modal/filter-modal.scss b/packages/p2p/src/components/buy-sell/filter-modal/filter-modal.scss
@@ -2,6 +2,33 @@
     &__column {
         display: flex;
         flex-direction: column;
+        @media (max-width: 450px) {
+            width: 80%;
+        }
+    }
+
+    &__select {
+        cursor: pointer;
+    }
+
+    &__arrow {
+        min-width: 1.8rem;
+        min-height: 1.8rem;
+    }
+
+    &__selected-payment-methods {
+        max-width: 350px;
+        max-height: 45px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+
+        @media (max-width: 450px) {
+            max-width: 300px;
+        }
+        @media (max-width: 400px) {
+            max-width: 250px;
+        }
     }
 
     &__footer {
@@ -19,6 +46,10 @@
         justify-content: space-between;
         min-height: 8rem;
         padding: 0 2.4rem;
+        @media (max-width: 375px) {
+            padding: 0 0 0 1.5rem;
+            justify-content: initial;
+        }
     }
 
     &__toggle {