Style updates

src/pages/homepage/components/Applications/Applications.tsx

@@ -9,7 +9,7 @@ function Applications({ contentType }: { contentType: string[] }) {
 	const { data: applicationData, isFetching: isApplicationDataFetching } = useQueryAPI({
 		endpoint: 'api/enabledApplications',
 	});
-	const { isMobile, appSort, appDensity } = useCommonHooks();
+	const { appSort, appDensity } = useCommonHooks();
 	const [applications, setApplications] = useState<Application[]>([]);
 
 	useEffect(() => {
@@ -53,9 +53,7 @@ function Applications({ contentType }: { contentType: string[] }) {
 							display: 'grid',
 							gridColumnGap: '5px',
 							gridRowGap: '5px',
-							gridTemplateColumns: isMobile
-								? '1fr 1fr 1fr'
-								: `repeat(${appDensity}, 1fr)`,
+							gridTemplateColumns: `repeat(${appDensity}, 1fr)`,
 							gridTemplateRows: '64px',
 						}}
 					>

src/pages/homepage/components/Bookmarks/BookmarkItem.tsx

@@ -9,6 +9,11 @@ function BookmarkItem({ bookmark }: { bookmark: Bookmark }) {
 			classNames={textClasses}
 			component='a'
 			href={bookmark.url}
+			style={{
+				textOverflow: 'ellipsis',
+				overflow: 'hidden',
+				width: '100%',
+			}}
 		>
 			{bookmark.name}
 		</Text>

src/pages/homepage/components/Bookmarks/Bookmarks.tsx

@@ -12,7 +12,7 @@ function Bookmarks({ contentType }: { contentType: string[] }) {
 	const { data: groupData, isFetched: groupsIsFetched } = useQueryAPI({
 		endpoint: 'api/bookmarkCategories',
 	});
-	const { isMobile, bookmarkSort, bookmarkDensity } = useCommonHooks();
+	const { bookmarkSort, bookmarkDensity } = useCommonHooks();
 	const [bookmarks, setBookmarks] = useState<Bookmark[]>([]);
 	const [groups, setGroups] = useState<BookmarkGroup[]>([]);
 
@@ -38,13 +38,11 @@ function Bookmarks({ contentType }: { contentType: string[] }) {
 							if (a.id && b.id) {
 								return a.id < b.id ? 1 : -1;
 							}
-
 							return -1;
 						case 'Oldest':
 							if (a.id && b.id) {
 								return a.id > b.id ? 1 : -1;
 							}
-
 							return -1;
 						case 'Custom':
 							return a.categoryIndex > b.categoryIndex ? 1 : -1;
@@ -70,9 +68,7 @@ function Bookmarks({ contentType }: { contentType: string[] }) {
 								flexWrap: 'nowrap',
 								gridColumnGap: '20px',
 								gridRowGap: '0px',
-								gridTemplateColumns: isMobile
-									? '1fr 1fr'
-									: `repeat(${bookmarkDensity}, 1fr)`,
+								gridTemplateColumns: `repeat(${bookmarkDensity}, 1fr)`,
 								gridTemplateRows: 'auto',
 							}}
 						>

src/pages/homepage/components/SettingsButton/SettingsButton.tsx

@@ -266,8 +266,11 @@ function SettingsButton() {
 									labelProps={{ display: 'none' }}
 									placeholder='Pick a playlist...'
 									value={currentThemePlaylist}
-									data={
-										themePlaylistData
+									data={[
+										'All',
+										'Backgrounds',
+										'No Backgrounds',
+										...(themePlaylistData
 											?.map((playlist: ThemePlaylist) => {
 												return {
 													value: playlist.name,
@@ -276,8 +279,8 @@ function SettingsButton() {
 											})
 											.toSorted((a: ComboboxItem, b: ComboboxItem) =>
 												a.label.localeCompare(b.label),
-											) ?? []
-									}
+											) ?? []),
+									]}
 									w='92%'
 									classNames={{
 										root: selectClasses.menuSelectRoot,