fix(css): fix flex columns in mobile version

Author: vault-developer

src/pages/home/sections/Callstack/Callstack.styled.ts

@@ -2,13 +2,19 @@ import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 import InfoClosed from 'components/CloseIcon/InfoIcon.tsx';
 
-export const Callstack = styled.div`
-	flex: 1;
-	display: flex;
-	flex-direction: column-reverse;
-	justify-content: end;
-	gap: 20px;
-`;
+export const Callstack = styled.div(
+	({ theme }) => css`
+		flex: 1;
+		display: flex;
+		flex-direction: row-reverse;
+		justify-content: end;
+		gap: 20px;
+
+		@media (min-width: ${theme.custom.breakpoints.desktop}px) {
+			flex-direction: column-reverse;
+		}
+	`
+);
 
 export const CallstackElement = styled.div(
 	({ theme }) => css`
@@ -18,6 +24,17 @@ export const CallstackElement = styled.div(
 		border-radius: 5px;
 		padding: 10px;
 		word-wrap: break-word;
+		word-break: break-word;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex: 1;
+		max-width: 33.33%;
+
+		@media (min-width: ${theme.custom.breakpoints.desktop}px) {
+			max-width: unset;
+			flex-grow: 0;
+		}
 	`
 );
 

src/pages/home/sections/Console/Console.styled.ts

@@ -1,13 +1,18 @@
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 
-export const LogQueue = styled.div`
-	flex: 1;
-	display: flex;
-	flex-direction: column;
-	justify-content: start;
-	gap: 20px;
-`;
+export const LogQueue = styled.div(
+	({ theme }) => css`
+		flex: 1;
+		display: flex;
+		justify-content: start;
+		gap: 20px;
+
+		@media (min-width: ${theme.custom.breakpoints.desktop}px) {
+			flex-direction: column;
+		}
+	`
+);
 
 export const Log = styled.div(
 	({ theme }) => css`
@@ -17,5 +22,15 @@ export const Log = styled.div(
 		border-radius: 5px;
 		padding: 10px;
 		word-wrap: break-word;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex: 1;
+		max-width: 33.33%;
+
+		@media (min-width: ${theme.custom.breakpoints.desktop}px) {
+			max-width: unset;
+			flex-grow: 0;
+		}
 	`
 );

src/theme/theme.ts

@@ -20,15 +20,15 @@ export const getMuiTheme = (cs: ColorsSystem) =>
 						fontSize: '14',
 						color: cs.colors.onContainer.contrast,
 						backgroundColor: cs.colors.onContainer.dim,
-						transition: 'all 1s ease',
+						transition: 'all 0.5s ease',
 					},
 				},
 			},
 			MuiMenu: {
 				styleOverrides: {
 					list: {
 						backgroundColor: cs.colors.onContainer.dim,
-						transition: 'all 1s ease',
+						transition: 'all 0.5s ease',
 					},
 				},
 			},
@@ -38,14 +38,14 @@ export const getMuiTheme = (cs: ColorsSystem) =>
 						'&.Mui-focused .MuiOutlinedInput-notchedOutline': {
 							borderColor: cs.colors.onContainer.normal,
 						},
-						transition: 'all 1s ease',
+						transition: 'all 0.5s ease',
 					},
 				},
 			},
 			MuiButton: {
 				styleOverrides: {
 					root: {
-						transition: 'all 1s ease',
+						transition: 'all 0.5s ease',
 					},
 				},
 			},
@@ -71,7 +71,7 @@ export const getTheme = (cs: ColorsSystem): Theme => {
 				desktop: 768,
 			},
 			transitions: {
-				color: '1s ease',
+				color: '0.5s ease',
 			},
 			animations: {
 				zoomIn: 'zoomIn 225ms cubic-bezier(0.4, 0, 0.2, 1)',