Inform about reader layout setting asterisk on touch device

The information for the asterisk was only shown as a tooltip, which is only optimal for non touch devices

public/locales/en.json

@@ -857,6 +857,7 @@
         "sepia": "Sepia",
         "title": "Custom filter"
       },
+      "default_setting_footnote": "$t(global.label.asterisk): $t(reader.settings.active_setting)",
       "error": {
         "label": {
           "failed_to_save_settings": "Could not save the reader settings to the server"

src/modules/reader/components/overlay/navigation/mobile/ReaderBottomBarMobileQuickSettings.tsx

@@ -13,6 +13,7 @@ import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
 import { useReaderStateMangaContext } from '@/modules/reader/contexts/state/ReaderStateMangaContext.tsx';
 import { MangaIdInfo } from '@/modules/manga/Manga.types.ts';
 import { ReaderSettingProfile } from '@/modules/reader/components/settings/layout/profiles/ReaderSettingProfile.tsx';
+import { DefaultSettingFootnote } from '@/modules/reader/components/settings/DefaultSettingFootnote.tsx';
 
 const DEFAULT_MANGA: MangaIdInfo = { id: -1 };
 export const ReaderBottomBarMobileQuickSettings = () => {
@@ -26,6 +27,7 @@ export const ReaderBottomBarMobileQuickSettings = () => {
 
     return (
         <Stack sx={{ gap: 2 }}>
+            <DefaultSettingFootnote />
             <ReaderSettingProfile
                 defaultProfile={defaultProfile}
                 profiles={profiles}

src/modules/reader/components/settings/DefaultSettingFootnote.tsx

@@ -0,0 +1,27 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { useTranslation } from 'react-i18next';
+import { MediaQuery } from '@/modules/core/utils/MediaQuery.tsx';
+
+export const DefaultSettingFootnote = () => {
+    const { t } = useTranslation();
+    const isTouchDevice = MediaQuery.useIsTouchDevice();
+
+    if (!isTouchDevice) {
+        return null;
+    }
+
+    return (
+        <Stack sx={{ alignItems: 'end' }}>
+            <Typography variant="caption">{t('reader.settings.default_setting_footnote')}</Typography>
+        </Stack>
+    );
+};

src/modules/reader/components/settings/layout/ReaderLayoutSettings.tsx

@@ -19,6 +19,7 @@ import { ReaderSettingsTypeProps } from '@/modules/reader/types/Reader.types.ts'
 import { ReaderSettingPageGap } from '@/modules/reader/components/settings/layout/ReaderSettingPageGap.tsx';
 import { ReaderSettingWidth } from '@/modules/reader/components/settings/layout/ReaderSettingWidth.tsx';
 import { ReaderSettingProfile } from '@/modules/reader/components/settings/layout/profiles/ReaderSettingProfile.tsx';
+import { DefaultSettingFootnote } from '@/modules/reader/components/settings/DefaultSettingFootnote.tsx';
 
 export const ReaderLayoutSettings = ({
     setShowPreview,
@@ -30,6 +31,7 @@ export const ReaderLayoutSettings = ({
     setShowPreview: ContextType<typeof ReaderTapZoneContext>['setShowPreview'];
 }) => (
     <Stack sx={{ gap: 2 }}>
+        <DefaultSettingFootnote />
         {isDefaultable && (
             <ReaderSettingProfile
                 defaultProfile={settings.defaultProfile}