fix: make accu stats header sticky (deriv-com#17383)

heorhi-deriv · Nov 6, 2024 · 538865e · 538865e
1 parent 8769161
commit 538865e
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 14 deletions.
diff --git a/packages/trader/src/AppV2/Components/AccumulatorStats/accumulator-stats-modal.tsx b/packages/trader/src/AppV2/Components/AccumulatorStats/accumulator-stats-modal.tsx
@@ -20,11 +20,11 @@ const AccumulatorStatsModal = ({
                         <Localize i18n_default_text='Stats' />
                     </Text>
                 </div>
-                <div className='stats-sheet__caption'>
-                    <Text>
-                        <Localize i18n_default_text='History of tick counts' />
-                    </Text>
-                </div>
+                <Text>
+                    <Localize i18n_default_text='History of tick counts' />
+                </Text>
+            </div>
+            <ActionSheet.Content>
                 <div className='stats-sheet__stats'>
                     <StatsRow
                         rows={rows[0]}
@@ -42,7 +42,7 @@ const AccumulatorStatsModal = ({
                         ))}
                     </div>
                 ))}
-            </div>
+            </ActionSheet.Content>
         </ActionSheet.Portal>
     );
 };

diff --git a/packages/trader/src/AppV2/Components/AccumulatorStats/accumulator-stats.scss b/packages/trader/src/AppV2/Components/AccumulatorStats/accumulator-stats.scss
@@ -117,19 +117,20 @@
 
 .accumulator-stats-sheet-wrapper {
     .stats-sheet {
-        max-height: 100dvh;
-        overflow-y: auto;
-        padding: var(--core-spacing-800);
-        text-align: center;
+        padding: var(--core-spacing-400) var(--core-spacing-800);
+        display: flex;
+        flex-direction: column;
+        gap: var(--core-spacing-400);
+        align-items: center;
+        justify-content: center;
         .slide-right {
             @include accumulator-slide-to-next;
         }
 
         &__title {
-            margin-bottom: var(--core-spacing-1200);
-        }
-        &__caption {
-            margin-bottom: var(--core-spacing-1200);
+            height: var(--core-spacing-2400);
+            align-items: center;
+            display: flex;
         }
         &__moving {
             display: flex;