@magmamath/students-features 0.9.6-rc.0 → 0.9.6-rc.2

package/dist/typescript/module/features/keyboard/types/MathKeysGroups/units.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"units.d.ts","sourceRoot":"","sources":["../../../../../../../src/features/keyboard/types/MathKeysGroups/units.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,MAAM,OAAO,CAAA;AAgCzB,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqC9B,CAAA;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0E5B,CAAA;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsE1B,CAAA;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmI5B,CAAA;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6D5B,CAAA;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkE1B,CAAA"}
+{"version":3,"file":"units.d.ts","sourceRoot":"","sources":["../../../../../../../src/features/keyboard/types/MathKeysGroups/units.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,MAAM,OAAO,CAAA;AAiCzB,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqC9B,CAAA;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0E5B,CAAA;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsE1B,CAAA;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmI5B,CAAA;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6D5B,CAAA;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkE1B,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magmamath/students-features",
-  "version": "0.9.6-rc.0",
+  "version": "0.9.6-rc.2",
   "description": "Magmamath features library",
   "source": "src/index.ts",
   "main": "src/index.ts",
@@ -29,7 +29,7 @@
     "react-native-svg": "^15.10.0"
   },
   "devDependencies": {
-    "@magmamath/react-native-ui": "0.4.61",
+    "@magmamath/react-native-ui": "0.4.44",
     "@react-native/eslint-config": "^0.73.1",
     "@release-it/conventional-changelog": "^9.0.2",
     "@types/jest": "^29.5.5",

package/src/features/chatbot/model/t2s.ts

@@ -86,12 +86,11 @@ export class ChatTextToSpeechModel {
           input: { text },
           voice: config?.voice ?? DEFAULT_VOICE,
           audioConfig: config?.audioConfig ?? AUDIO_CONFIG,
-          enableTimePointing: [],
         })
 
         // Response might be different type based on provided AUDIO_CONFIG
-        if (typeof response.audioContent === 'string') {
-          audioPath = `data:audio/mpeg;base64,${response.audioContent}`
+        if (typeof response === 'string') {
+          audioPath = `data:audio/mpeg;base64,${response}`
         } else {
           audioPath = response?.audioContent ?? ''
         }

package/src/features/chatbot/types/api.types.ts

@@ -77,18 +77,9 @@ export type GoogleText2SpeechPayload = {
     pitch: number
     speakingRate: number
   }
-  enableTimePointing?: string[]
 }
 
-export type Timepoint = {
-  markName: string
-  timeSeconds: number
-}
-
-export type GoogleText2SpeechResponse = {
-  audioContent?: string
-  timepoints?: Timepoint[]
-}
+export type GoogleText2SpeechResponse = string | undefined | { audioContent?: string }
 
 export type ChatHintPayload = {
   problemDescription: string

package/src/features/endOfAssignment/components/CorrectAnswer/CorrectAnswer.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useState } from 'react'
 import { View, StyleSheet } from 'react-native'
+
 import { useUnit } from 'effector-react'
 import { SPACING, Typography, COLORS, FONT_FAMILY } from '@magmamath/react-native-ui'
 
@@ -10,8 +11,6 @@ import { GOOD_DRAWING_CARD_APPEARENCE_DELAY } from '../../constants'
 import { AnimatedCardVariant, EOAModalContentProps, EOAModalVariant } from '../../types'
 import { useKeyBoard } from '../../../../shared/hooks/useKeyboard'
 import { KeyboardKeys } from '../../../../lib/constants'
-import { getEoaButtonColor } from '../../helpers'
-import { AssessmentScoreCard } from '../AssessmentScoreCard/AssessmentScoreCard'
 
 export const CorrectAnswer = ({ textContent, model, onPracticePress }: EOAModalContentProps) => {
   const popUpData = useUnit(model.$popUpData)
@@ -23,7 +22,6 @@ export const CorrectAnswer = ({ textContent, model, onPracticePress }: EOAModalC
     stats,
     hasRecommendations,
     isExam = false,
-    isAssessment = false,
     newerAssignmentAvailable,
   } = popUpData ?? {}
 
@@ -74,22 +72,14 @@ export const CorrectAnswer = ({ textContent, model, onPracticePress }: EOAModalC
       </View>
 
       <View style={styles.animationContainer}>
-        {isAssessment ? (
-          <AssessmentScoreCard
-            textContent={textContent}
-            solvedAmount={stats?.solvedAmount}
-            problemsAmount={stats?.problemsAmount}
-          />
-        ) : (
-          <AnimatedCard
-            variant={AnimatedCardVariant.CORRECT_ANSWER}
-            textContent={textContent}
-            solvedAmount={stats?.solvedAmount}
-            problemsAmount={stats?.problemsAmount}
-            shouldTriggerSparkles={cardsAnimationCompleted}
-            onAnimationEnd={onCorrectAnswerAnimationEnd}
-          />
-        )}
+        <AnimatedCard
+          variant={AnimatedCardVariant.CORRECT_ANSWER}
+          textContent={textContent}
+          solvedAmount={stats?.solvedAmount}
+          problemsAmount={stats?.problemsAmount}
+          shouldTriggerSparkles={cardsAnimationCompleted}
+          onAnimationEnd={onCorrectAnswerAnimationEnd}
+        />
 
         {modalVariant === EOAModalVariant.HAS_GOOD_DRAWING && (
           <AnimatedCard
@@ -106,9 +96,9 @@ export const CorrectAnswer = ({ textContent, model, onPracticePress }: EOAModalC
       <PracticeButtonGroup
         textContent={textContent}
         isPracticeButtonVisible={isPracticeButtonVisible}
+        isExam={isExam}
         onLeftButtonPress={model.hidePopUpAndLeave}
         onRightButtonPress={handlePracticeButtonPress}
-        buttonColor={getEoaButtonColor(popUpData)}
       />
     </View>
   )

package/src/features/endOfAssignment/components/EOAModal.tsx

@@ -14,6 +14,7 @@ import { ExamPaused } from './ExamPaused/ExamPaused'
 import { ExamSubmit } from './ExamSubmit/ExamSubmit'
 
 import { getModalContainerSize, shouldDisplayModalBackground } from '../helpers'
+import { ButtonColor } from '@magmamath/react-native-ui'
 
 const MODAL_CONTENT_VARIANTS_MAP = new Map([
   [EOAModalVariant.NO_CORRECT_ANSWERS, NoAnswer],
@@ -32,6 +33,7 @@ type EOAModalProps = {
   model: EOAModel
   textContent: EOAModalText
   onPracticePress: () => void
+  buttonColor?: ButtonColor
 }
 
 /**
@@ -40,7 +42,7 @@ type EOAModalProps = {
  * Dynamically renders a modal UI after an assignment ends, using the current `modalVariant`
  * to determine which specific view to display (e.g., `NoAnswer`, `CorrectAnswer`, `CheatDetected`).
  */
-export const EOAModal = ({ model, textContent, onPracticePress }: EOAModalProps) => {
+export const EOAModal = ({ model, textContent, onPracticePress, buttonColor }: EOAModalProps) => {
   const popUpData = useUnit(model.$popUpData)
   const modalVariant = useUnit(model.$modalVariant)
 
@@ -62,7 +64,12 @@ export const EOAModal = ({ model, textContent, onPracticePress }: EOAModalProps)
       style={getModalContainerSize(modalVariant)}
       onClose={model.hidePopUp}
       content={
-        <ModalContent model={model} textContent={textContent} onPracticePress={onPracticePress} />
+        <ModalContent
+          model={model}
+          textContent={textContent}
+          onPracticePress={onPracticePress}
+          buttonColor={buttonColor}
+        />
       }
       withBackground={withBackground}
     />

package/src/features/endOfAssignment/components/ExamPaused/ExamPaused.tsx

@@ -13,12 +13,12 @@ import {
 import { EOAModalContentProps } from '../../types'
 import { useKeyBoard } from '../../../../shared/hooks/useKeyboard'
 import { KeyboardKeys } from '../../../../lib/constants'
-import { getEoaButtonColor } from '../../helpers'
-import { useUnit } from 'effector-react'
-
-export const ExamPaused = ({ textContent, model }: EOAModalContentProps) => {
-  const popUpData = useUnit(model.$popUpData)
 
+export const ExamPaused = ({
+  textContent,
+  model,
+  buttonColor = ButtonColor.PURPLE,
+}: EOAModalContentProps) => {
   useKeyBoard({
     callback: (event) => {
       if (event.key === KeyboardKeys.ENTER) {
@@ -39,7 +39,7 @@ export const ExamPaused = ({ textContent, model }: EOAModalContentProps) => {
 
       <Button
         variant={ButtonVariant.PRIMARY}
-        colorScheme={getEoaButtonColor(popUpData)}
+        colorScheme={buttonColor}
         size={ButtonSize.LARGE}
         style={{ text: styles.buttonText }}
         onPress={model.hidePopUpAndLeave}

package/src/features/endOfAssignment/components/ExamSubmit/ExamSubmit.tsx

@@ -4,6 +4,7 @@ import { View, StyleSheet, Platform, Image } from 'react-native'
 import { useUnit } from 'effector-react'
 import {
   Button,
+  ButtonColor,
   ButtonSize,
   ButtonVariant,
   COLORS,
@@ -17,7 +18,6 @@ import { EOAModalContentProps } from '../../types'
 import { PracticeButton } from '../../ui/PracticeButton'
 import { useKeyBoard } from '../../../../shared/hooks/useKeyboard'
 import { KeyboardKeys } from '../../../../lib/constants'
-import { getEoaButtonColor } from '../../helpers'
 
 export const ExamSubmit = ({ textContent, model, onPracticePress }: EOAModalContentProps) => {
   const popUpData = useUnit(model.$popUpData)
@@ -60,7 +60,7 @@ export const ExamSubmit = ({ textContent, model, onPracticePress }: EOAModalCont
         <Button
           variant={isPracticeButtonVisible ? ButtonVariant.TERTIARY : ButtonVariant.PRIMARY}
           size={ButtonSize.LARGE}
-          colorScheme={getEoaButtonColor(popUpData)}
+          colorScheme={popUpData?.isExam ? ButtonColor.PURPLE : ButtonColor.BLUE}
           style={{ text: { textTransform: 'uppercase' } }}
           onPress={model.hidePopUpAndLeave}
         >

package/src/features/endOfAssignment/components/NoAnswer/NoAnswer.tsx

@@ -16,19 +16,17 @@ import { EOAModalContentProps } from '../../types'
 import { NoAnswerContent } from './NoAnswerContent'
 import { useKeyBoard } from '../../../../shared/hooks/useKeyboard'
 import { KeyboardKeys } from '../../../../lib/constants'
-import { getEoaButtonColor } from '../../helpers'
-import { AssessmentScoreCard } from '../AssessmentScoreCard/AssessmentScoreCard'
 
 export const NoAnswer = ({ model, textContent, onPracticePress }: EOAModalContentProps) => {
   const popUpData = useUnit(model.$popUpData)
 
-  const { stats, isExam, isAssessment, user } = popUpData ?? {}
+  const { stats, isExam, user } = popUpData ?? {}
 
   function getButtons() {
     const buttons = [
       {
         text: textContent.leftButtonText ?? '',
-        colorScheme: getEoaButtonColor(popUpData),
+        colorScheme: isExam ? ButtonColor.PURPLE : ButtonColor.BLUE,
         onPress: () => model.hidePopUpAndLeave(),
       },
     ]
@@ -86,19 +84,10 @@ export const NoAnswer = ({ model, textContent, onPracticePress }: EOAModalConten
           </Typography>
         )}
       </View>
-      {isAssessment ? (
-        <AssessmentScoreCard
-          textContent={textContent}
-          solvedAmount={stats?.solvedAmount}
-          problemsAmount={stats?.problemsAmount}
-        />
-      ) : (
-        <NoAnswerContent
-          solvedAmount={stats?.solvedAmount ?? 0}
-          problemsAmount={stats?.problemsAmount ?? 0}
-        />
-      )}
-
+      <NoAnswerContent
+        solvedAmount={stats?.solvedAmount ?? 0}
+        problemsAmount={stats?.problemsAmount ?? 0}
+      />
       <View style={styles.buttonsContainer}>
         {buttons.map((button, index) => (
           <Button

package/src/features/endOfAssignment/helpers.ts

@@ -1,17 +1,16 @@
 import { MODALS_WITH_BACKGROUND } from './constants'
-import { EOAModalData, EOAModalVariant } from './types'
-import { ButtonColor } from '@magmamath/react-native-ui'
+import { EOAModalVariant } from './types'
 
 export const getModalContainerSize = (modalVariant: EOAModalVariant) => {
   switch (modalVariant) {
     case EOAModalVariant.EXAM_SUBMIT:
     case EOAModalVariant.EXAM_SAFE_MODE_SUBMIT:
-      return { container: { width: 620, height: 384 } }
+      return { container: { width: 600, height: 384 } }
     case EOAModalVariant.EXAM_PAUSED:
     case EOAModalVariant.EXAM_SAFE_MODE_CHEAT_DETECTED:
       return { container: { width: 560, height: 338 } }
     case EOAModalVariant.EXAM_SAFE_MODE_LEAVE:
-      return { container: { width: 550, height: 325 } }
+      return { container: { width: 550, height: 280 } }
     case EOAModalVariant.HAS_GOOD_DRAWING:
       return { container: { width: 957, height: 550 } }
     case EOAModalVariant.HAS_CORRECT_ANSWERS:
@@ -27,9 +26,3 @@ export const shouldDisplayModalBackground = (modalVariant: EOAModalVariant | nul
 
   return MODALS_WITH_BACKGROUND.includes(modalVariant)
 }
-
-export const getEoaButtonColor = (popupData: EOAModalData | null): ButtonColor => {
-  if (popupData?.isAssessment) return ButtonColor.SUNSET
-  if (popupData?.isExam) return ButtonColor.PURPLE
-  return ButtonColor.BLUE
-}

package/src/features/endOfAssignment/model/model.ts

@@ -9,7 +9,6 @@ export class EOAModel {
   public readonly leavePressed = createEvent()
   public readonly goToFirstProblemPressed = createEvent()
   public readonly recommendationsUpdated = createEvent<boolean>()
-  public readonly popUpStatsUpdated = createEvent<Partial<EOAModalData['stats']>>()
   public readonly popUpTriggered = createEvent<EOAEventType>()
 
   public readonly $popUpData = createStore<EOAModalData | null>(null)
@@ -17,9 +16,6 @@ export class EOAModel {
     .on(this.recommendationsUpdated, (state, hasRecommendations) =>
       state ? { ...state, hasRecommendations } : state,
     )
-    .on(this.popUpStatsUpdated, (state, payload) =>
-      state ? { ...state, stats: { ...state.stats, ...payload } } : state,
-    )
     .reset(this.hidePopUp)
 
   public readonly $modalVariant = createStore<EOAModalVariant | null>(null)
@@ -37,7 +33,7 @@ export class EOAModel {
       }
 
       if (eventType === EOAEventType.EXAM_PAUSED) return EOAModalVariant.EXAM_PAUSED
-
+      
       if (eventType === EOAEventType.CHEAT_DETECTED) {
         return EOAModalVariant.EXAM_SAFE_MODE_CHEAT_DETECTED
       }

package/src/features/endOfAssignment/types.ts

@@ -34,11 +34,11 @@ export type EOAModalContentProps = {
   textContent: EOAModalText
   model: EOAModel
   onPracticePress?: () => void
+  buttonColor?: ButtonColor
 }
 
 export type EOAModalData = {
   isExam: boolean
-  isAssessment: boolean
   newerAssignmentAvailable?: boolean
   examFinished?: boolean
   cheatDetection?: boolean
@@ -63,6 +63,5 @@ export type EOAModalText = {
     correctAnswersPlural?: string
     goodCalculations?: string
     goodCalculationsPlural?: string
-    score?: string
   }
 }

package/src/features/endOfAssignment/ui/PracticeButtonGroup.tsx

@@ -11,14 +11,13 @@ import Animated, {
 import { ButtonVariant, SPACING, Button, ButtonSize, ButtonColor } from '@magmamath/react-native-ui'
 
 import { PracticeButton } from './PracticeButton'
-import { getEoaButtonColor } from '../helpers'
 
 type PracticeButtonGroupProps = {
   textContent: { leftButtonText?: string; rightButtonText?: string }
   isPracticeButtonVisible: boolean
   onLeftButtonPress: () => void
   onRightButtonPress: () => void
-  buttonColor?: ButtonColor
+  isExam: boolean
 }
 
 export const PracticeButtonGroup = ({
@@ -26,7 +25,7 @@ export const PracticeButtonGroup = ({
   isPracticeButtonVisible,
   onLeftButtonPress,
   onRightButtonPress,
-  buttonColor = ButtonColor.BLUE,
+  isExam,
 }: PracticeButtonGroupProps) => {
   const buttonsContainerOpacity = useSharedValue(0)
 
@@ -46,7 +45,7 @@ export const PracticeButtonGroup = ({
         <Button
           variant={isPracticeButtonVisible ? ButtonVariant.TERTIARY : ButtonVariant.PRIMARY}
           size={ButtonSize.LARGE}
-          colorScheme={buttonColor}
+          colorScheme={isExam ? ButtonColor.PURPLE : ButtonColor.BLUE}
           style={{ text: { textTransform: 'uppercase' } }}
           onPress={onLeftButtonPress}
         >

package/src/features/keyboard/components/AlgebraLayout/AlgebraLayout.tsx

@@ -49,7 +49,14 @@ export const AlgebraLayout = ({ onLayoutChange, ...props }: KeyboardLayoutProps)
           ]}
         />
       )}
-      <KeysList keys={currentKeys} numOfRows={3} {...props} />
+      <KeysList
+        keys={currentKeys}
+        numOfRows={3}
+        style={{
+          container: styles.keyListContainer,
+        }}
+        {...props}
+      />
     </View>
   )
 }
@@ -76,4 +83,7 @@ const styles = StyleSheet.create({
     flexBasis: 45,
     width: 44,
   },
+  keyListContainer: {
+    flexShrink: 1,
+  },
 })

package/src/features/keyboard/components/Keyboard.tsx

@@ -66,7 +66,6 @@ export const Keyboard = ({ style, characterType, isVisible = true, ...props }: K
 const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
-    alignItems: 'flex-start',
     justifyContent: 'space-between',
     backgroundColor: COLORS.NEUTRAL_2,
     borderRadius: 12,
@@ -75,7 +74,6 @@ const styles = StyleSheet.create({
     paddingBottom: 13,
     borderColor: COLORS.NEUTRAL_5,
     borderWidth: 1,
-    width: 'auto',
     height: 155,
     ...SHADOWS[2],
   },

package/src/features/keyboard/components/KeysList/KeysList.tsx

@@ -46,7 +46,7 @@ export const KeysList = ({
   return (
     <SelectGroup
       style={{
-        container: [styles.container, style?.container],
+        container: styles.container,
         row: styles.row,
       }}
       numOfRows={numOfRows}
@@ -60,7 +60,6 @@ export const KeysList = ({
 
 export const styles = StyleSheet.create({
   container: {
-    width: 'auto',
     gap: 9,
   },
   row: {

package/src/features/keyboard/components/MainLayout.tsx

@@ -76,5 +76,6 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'flex-start',
     justifyContent: 'space-between',
+    flexShrink: 1,
   },
 })

package/src/features/keyboard/components/Numpad/Numpad.tsx

@@ -16,14 +16,7 @@ export const Numpad = ({ style, ...props }: NumpadProps) => {
 
   return (
     <View style={[styles.container, style]}>
-      <KeysList
-        keys={keyboardGroup.keys}
-        numOfRows={3}
-        style={{
-          container: styles.keysContainer,
-        }}
-        {...props}
-      />
+      <KeysList keys={keyboardGroup.keys} numOfRows={3} {...props} />
     </View>
   )
 }
@@ -31,16 +24,6 @@ export const Numpad = ({ style, ...props }: NumpadProps) => {
 const styles = StyleSheet.create({
   container: {
     borderLeftWidth: 1,
-    borderColor: 'transparent',
     paddingLeft: SPACING[800],
-    marginLeft: 'auto',
-  },
-  keysContainer: {
-    display: 'flex',
-    width: 'auto',
-    flexGrow: 0,
-    flexShrink: 0,
-    flexBasis: 'auto',
-    gap: 9,
   },
 })

package/src/features/keyboard/components/UnitsLayout/UnitTabs.tsx

@@ -24,31 +24,29 @@ export const UnitTabs = ({ activeTab, tabs, onTabChange, ...props }: UnitTabsPro
 
   return (
     <View style={styles.container}>
-      <View style={styles.tabsContainer}>
-        <TabGroup
-          activeTab={activeTab}
-          tabs={tabs}
-          onTabChange={onTabChange}
-          style={styles.tabs}
-          variant={TabVariant.SMALL}
-        />
-        <View style={styles.keyGroupContainer}>
-          {keyboardGroups.map((keyGroup, index) => (
-            <KeysList
-              key={index}
-              keys={keyGroup}
-              numOfRows={1}
-              {...props}
-              style={{
-                option: {
-                  text: styles.keysText,
-                  container: styles.keyContainer,
-                  button: styles.keyButton,
-                },
-              }}
-            />
-          ))}
-        </View>
+      <TabGroup
+        activeTab={activeTab}
+        tabs={tabs}
+        onTabChange={onTabChange}
+        style={styles.tabs}
+        variant={TabVariant.SMALL}
+      />
+      <View style={styles.keyGroupContainer}>
+        {keyboardGroups.map((keyGroup, index) => (
+          <KeysList
+            key={index}
+            keys={keyGroup}
+            numOfRows={1}
+            {...props}
+            style={{
+              option: {
+                text: styles.keysText,
+                container: styles.keyContainer,
+                button: styles.keyButton,
+              },
+            }}
+          />
+        ))}
       </View>
     </View>
   )
@@ -56,12 +54,8 @@ export const UnitTabs = ({ activeTab, tabs, onTabChange, ...props }: UnitTabsPro
 
 const styles = StyleSheet.create({
   container: {
-    width: 283,
     flex: 1,
-  },
-  tabsContainer: {
     gap: 16,
-    flex: 1,
   },
   tabs: {
     borderBottomWidth: 1,

package/src/features/keyboard/components/UnitsLayout/UnitsLayout.tsx

@@ -46,6 +46,7 @@ export const UnitsLayout = ({ onLayoutChange, ...props }: KeyboardLayoutProps) =
           ]}
         />
       )}
+
       {selectedLayout === SelectedLayout.UNITS ? (
         <UnitTabs tabs={tabs} activeTab={activeTab} onTabChange={setActiveTab} {...props} />
       ) : (

package/src/features/keyboard/components/UnitsLayout/hooks/useUnitTabs.ts

@@ -10,22 +10,18 @@ export const useUnitTabs = () => {
     () => [
       {
         title: t('keyboard.length'),
-        style: { paddingLeft: 0, paddingRight: 32, marginRight: -16 },
         key: KeyboardUnitsGroupType.LENGTH,
       },
       {
         title: t('keyboard.area'),
-        style: { paddingHorizontal: 10 },
         key: KeyboardUnitsGroupType.AREA,
       },
       {
         title: t('keyboard.volume'),
-        style: { paddingHorizontal: 10 },
         key: KeyboardUnitsGroupType.VOLUME,
       },
       {
         title: t('keyboard.weight'),
-        style: { paddingHorizontal: 10, paddingRight: 0 },
         key: KeyboardUnitsGroupType.WEIGHT,
       },
     ],

package/src/features/keyboard/types/MathKeysGroups/units.tsx

@@ -7,33 +7,34 @@ import { YenIcon } from '../../../../shared/icons/keyboard/YenIcon/YenIcon'
 import { CentIcon } from '../../../../shared/icons/keyboard/CentIcon/CentIcon'
 import { DEFAULT_KEY_ICON_PROPS } from '../../constants/constants'
 import React from 'react'
-import { IS_MOBILE } from '@magmamath/react-native-ui'
+import { IS_MOBILE, IS_WEB } from '@magmamath/react-native-ui'
 import { createMathKeysGroup } from './helpers'
 
 const BASE_TEXT_STYLE = {
   fontSize: 14,
-  fontWeight: 700 as const,
-}
+  fontWeight: 700,
+} as const
 
 const STYLE_PRESETS = {
   SMALL: {
-    button: { width: IS_MOBILE ? 44 : 40 },
-    container: { flexBasis: IS_MOBILE ? 48 : undefined },
+    button: { width: IS_WEB ? 40 : 44 },
+    container: IS_MOBILE ? { flexBasis: 48 } : undefined,
     text: BASE_TEXT_STYLE,
   },
   MEDIUM: {
-    button: { width: IS_MOBILE ? 50 : 45 },
-    container: { flexBasis: IS_MOBILE ? 54 : undefined },
+    button: { width: IS_WEB ? 45 : 51 },
+    container: IS_MOBILE ? { flexBasis: 55 } : undefined,
     text: BASE_TEXT_STYLE,
   },
   LARGE: {
-    button: { width: IS_MOBILE ? 54 : 48 },
-    container: { flexBasis: IS_MOBILE ? 58 : undefined },
+    button: { width: IS_WEB ? 48 : 55 },
+    container: IS_MOBILE ? { flexBasis: 59 } : undefined,
+
     text: BASE_TEXT_STYLE,
   },
   XL: {
-    button: { width: IS_MOBILE ? 56 : 52 },
-    container: { flexBasis: IS_MOBILE ? 60 : undefined },
+    button: { width: IS_WEB ? 52 : 54 },
+    container: IS_MOBILE ? { flexBasis: 60 } : undefined,
     text: BASE_TEXT_STYLE,
   },
 }
@@ -208,7 +209,7 @@ export const MATH_AREA_UNITS = createMathKeysGroup({
     mathliveValue: '\\mathrm{mi}^2',
     katexValue: 'mi^2',
     mathQuillValue: 'mi^{2}',
-    style: STYLE_PRESETS.SMALL,
+    style: STYLE_PRESETS.MEDIUM,
   },
   SQUARE_YARD: {
     label: 'yd²',
@@ -324,7 +325,7 @@ export const MATH_VOLUME_UNITS = createMathKeysGroup({
     mathliveValue: '\\mathrm{cup}',
     katexValue: 'cup',
     mathQuillValue: '\\cup',
-    style: STYLE_PRESETS.MEDIUM,
+    style: STYLE_PRESETS.LARGE,
   },
   GAL: {
     label: 'gal',