diff --git a/kolibri/plugins/learn/assets/src/views/TopicsPage/TopicsMobileHeader.vue b/kolibri/plugins/learn/assets/src/views/TopicsPage/TopicsMobileHeader.vue
index 1dc1d140c75..6fd91195f90 100644
--- a/kolibri/plugins/learn/assets/src/views/TopicsPage/TopicsMobileHeader.vue
+++ b/kolibri/plugins/learn/assets/src/views/TopicsPage/TopicsMobileHeader.vue
@@ -9,9 +9,9 @@
       :layout4="{ span: 3 }"
     >
       <h1 class="mobile-title" data-test="mobile-title">
-        <TextTruncator
+        <TextTruncatorCss
           :text="topic.title"
-          :maxHeight="110"
+          :maxLines="2"
         />
       </h1>
     </KGridItem>
@@ -30,11 +30,11 @@
 
 <script>
 
-  import TextTruncator from 'kolibri.coreVue.components.TextTruncator';
+  import TextTruncatorCss from 'kolibri.coreVue.components.TextTruncatorCss';
 
   export default {
     name: 'TopicsMobileHeader',
-    components: { TextTruncator },
+    components: { TextTruncatorCss },
     props: {
       topic: {
         type: Object,