enlarge app icons

src/components/Apps/AppInfoSnippet.tsx

@@ -59,8 +59,8 @@ export const AppInfoSnippet = ({ app, myName, isFromCategory, parentStyles = {}
           >
             <Avatar
               sx={{
-                height: "31px",
-                width: "31px",
+                height: "42px",
+                width: "42px",
                 '& img': { 
                   objectFit: 'fill',
                 }

src/components/Apps/Apps-styles.tsx

@@ -94,13 +94,16 @@ import {
     
   }));
   export const AppCircleLabel = styled(Typography)(({ theme }) => ({
-    fontSize: '12px',
+    fontSize: '14px',
     fontWeight: 500,
     lineHeight: 1.2,
-    whiteSpace: 'nowrap',   
+    // whiteSpace: 'nowrap',   
   overflow: 'hidden',     
   textOverflow: 'ellipsis', 
-  width: '100%'
+  width: '120%',
+  '-webkit-line-clamp': '2',
+  '-webkit-box-orient': 'vertical',
+  'display': '-webkit-box'
   }));
   export const AppLibrarySubTitle = styled(Typography)(({ theme }) => ({
     fontSize: '16px',
@@ -109,9 +112,9 @@ import {
   }));
   export const AppCircle = styled(Box)(({ theme }) => ({
     display: "flex",
-      width: "60px",
+    width: "75px",
     flexDirection: "column",
-      height: "60px",
+    height: "75px",
       alignItems: 'center',
       justifyContent: 'center',
       borderRadius: '50%',

src/components/Apps/AppsHomeDesktop.tsx

@@ -116,7 +116,7 @@ export const AppsHomeDesktop = ({
       <Spacer height="45px" />
       <AppsContainer
         sx={{
-          gap: "75px",
+          gap: "50px",
           justifyContent: "flex-start",
         }}
       >

src/components/Apps/AppsLibraryDesktop.tsx

@@ -297,13 +297,15 @@ export const AppsLibraryDesktop = ({
                 Official Apps
               </AppLibrarySubTitle>
               <Spacer height="45px" />
-              <AppsContainer>
+              <AppsContainer sx={{
+                gap: '50px',
+                justifyContent: 'flex-start'
+              }}>
                 {officialApps?.map((qapp) => {
                   return (
                     <ButtonBase
                       sx={{
-                        height: "80px",
-                        width: "60px",
+                        width: "80px",
                       }}
                       onClick={() => {
                         // executeEvent("addTab", {
@@ -326,8 +328,8 @@ export const AppsLibraryDesktop = ({
                         >
                           <Avatar
                             sx={{
-                              height: "31px",
-                              width: "31px",
+                              height: "42px",
+                              width: "42px",
                             }}
                             alt={qapp?.name}
                             src={`${getBaseApiReact()}/arbitrary/THUMBNAIL/${

src/components/Apps/SortablePinnedApps.tsx

@@ -31,8 +31,7 @@ const SortableItem = ({ id, name, app, isDesktop }) => {
         <ButtonBase
         ref={setNodeRef} {...attributes} {...listeners}
               sx={{
-                height: "80px",
-                width: "60px",
+                width: "80px",
                 transform: CSS.Transform.toString(transform),
                 transition,
               }}
@@ -53,8 +52,8 @@ const SortableItem = ({ id, name, app, isDesktop }) => {
                 >
                   <Avatar
                     sx={{
-                      height: "31px",
-                      width: "31px",
+                      height: "42px",
+                      width: "42px",
                       '& img': { 
                         objectFit: 'fill',
                       }