fix: styling problems in web

Author: farhoudshapouran

src/components/Calendar.tsx

@@ -8,6 +8,7 @@ import YearSelector from './YearSelector';
 import MonthSelector from './MonthSelector';
 import DaySelector from './DaySelector';
 import TimeSelector from './TimeSelector';
+import { CALENDAR_HEIGHT } from '../enums';
 
 const CalendarView: Record<CalendarViews, ReactNode> = {
   year: <YearSelector />,
@@ -39,7 +40,7 @@ const styles = StyleSheet.create({
     width: '100%',
   },
   calendarContainer: {
-    height: 300,
+    height: CALENDAR_HEIGHT,
     alignItems: 'center',
   },
 });

src/components/DaySelector.tsx

@@ -1,6 +1,7 @@
 import React, { memo, useMemo } from 'react';
 import { Text, View, TouchableOpacity, StyleSheet } from 'react-native';
 import { useCalendarContext } from '../CalendarContext';
+import { CALENDAR_HEIGHT } from '../enums';
 
 const DaySelector = () => {
   const { utils, currentDate, selectedDate, onSelectDate, theme } =
@@ -111,6 +112,7 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     paddingTop: 5,
+    width: '100%',
   },
   weekDaysContainer: {
     width: '100%',
@@ -128,14 +130,17 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   daysContainer: {
+    flex: 1,
     width: '100%',
     height: '100%',
     flexWrap: 'wrap',
     flexDirection: 'row',
+    justifyContent: 'center',
+    alignContent: 'flex-start',
   },
   dayCell: {
     width: '14.2%',
-    height: '14.2%',
+    height: CALENDAR_HEIGHT / 7 - 1,
   },
   dayContainer: {
     flex: 1,

src/components/MonthSelector.tsx

@@ -57,7 +57,6 @@ const styles = StyleSheet.create({
   monthsContainer: {
     flexDirection: 'row',
     flexWrap: 'wrap',
-    margin: 5,
   },
   monthCell: {
     width: '33.3%',

src/components/YearSelector.tsx

@@ -65,12 +65,14 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
     margin: 5,
+    width: '100%',
   },
   yearCell: {
     width: '33.3%',
   },
   yearsRow: {
     flexDirection: 'row',
+    width: '100%',
   },
   year: {
     paddingVertical: 15,

src/enums.ts

@@ -10,3 +10,5 @@ export enum CalendarActionKind {
   CHANGE_CURRENT_DATE = 'CHANGE_CURRENT_DATE',
   CHANGE_SELECTED_DATE = 'CHANGE_SELECTED_DATE',
 }
+
+export const CALENDAR_HEIGHT = 300;