Style bugfixes and updates

src/pages/settings/components/Applications/Applications.tsx

@@ -118,7 +118,35 @@ const ApplicationSettings = () => {
 		}
 	}, [applicationList]);
 	return (
-		<Stack w={'100%'}>
+		<Stack>
+			<SettingsHeader
+				setDragging={applications.length > 0 ? setDragging : undefined}
+				openModal={openModal}
+				title={'Applications'}
+				tooltip={{
+					title:
+						'Applications are the app buttons that will be displayed on the homepage.',
+					highlightList: [
+						'Applications',
+						'applicationData',
+						'application',
+						'app',
+						'apps',
+						'name',
+						'base url',
+						'url',
+						'icon',
+						'filter',
+					],
+					description:
+						'Applications contain a name, base url, url, icon and filter. URLs can contain either http(s):// or not. Base URLs should start with /, otherwise they will cause errors.',
+				}}
+				searchValue={searchValue}
+				setSearchValue={setSearchValue}
+				searchPlaceholder={'Search Applications...'}
+				isLoading={isLoading}
+				setIsLoading={setIsLoading}
+			/>
 			<AddItemModal
 				modalOpened={modalOpened}
 				handleClose={handleClose}
@@ -238,41 +266,8 @@ const ApplicationSettings = () => {
 					</form>
 				}
 			/>
-			<SettingsHeader
-				setDragging={applications.length > 0 ? setDragging : undefined}
-				openModal={openModal}
-				title={'Applications'}
-				tooltip={{
-					title:
-						'Applications are the app buttons that will be displayed on the homepage.',
-					highlightList: [
-						'Applications',
-						'applicationData',
-						'application',
-						'app',
-						'apps',
-						'name',
-						'base url',
-						'url',
-						'icon',
-						'filter',
-					],
-					description:
-						'Applications contain a name, base url, url, icon and filter. URLs can contain either http(s):// or not. Base URLs should start with /, otherwise they will cause errors.',
-				}}
-				searchValue={searchValue}
-				setSearchValue={setSearchValue}
-				searchPlaceholder={'Search Applications...'}
-				isLoading={isLoading}
-				setIsLoading={setIsLoading}
-			/>
 			<DragDropContext onDragEnd={onDragEnd}>
-				<Stack
-					mt={isMobile ? '10rem' : '6rem'}
-					mb={isMobile ? '6rem' : '1rem'}
-					w={'100%'}
-					align='center'
-				>
+				<Stack mb={isMobile ? '6rem' : '1rem'} align='center'>
 					{applications.length > 0 ? (
 						<Droppable droppableId={'groupList'}>
 							{(provided) => (
@@ -301,12 +296,9 @@ const ApplicationSettings = () => {
 																	style={{
 																		color: 'var(--mantine-color-primary-0)',
 																		zIndex: 1,
-																		alignContent: 'center',
-																		fontSize: '1.5em',
 																		position: 'absolute',
-																		right: 0,
-																		paddingRight: '1rem',
-																		height: '100%',
+																		right: 4,
+																		bottom: 0,
 																	}}
 																>
 																	#{index + 1}