Add height mode option to advanced settings

src/lang/en.ts

@@ -550,4 +550,5 @@ export const languageEnglish = {
     log: "Log",
     popularityLevelDesc: "Popularity increases with downloads, etc. to estimate, 3.7 popularity is about 1 downloads.",
     additionalParams: "Additional Parameters",
+    heightMode: "Height Mode",
 }

src/lib/Setting/Pages/AdvancedSettings.svelte

@@ -43,6 +43,16 @@
     <OptionInput value="high">High</OptionInput>
 </SelectInput>
 
+<span class="text-textcolor mt-4">{language.heightMode}</span>
+<SelectInput bind:value={$DataBase.heightMode}>
+    <OptionInput value="normal">Normal</OptionInput>
+    <OptionInput value="percent">Percent</OptionInput>
+    <OptionInput value="vh">VH</OptionInput>
+    <OptionInput value="dvh">DVH</OptionInput>
+    <OptionInput value="svh">SVH</OptionInput>
+    <OptionInput value="lvh">LVH</OptionInput>
+</SelectInput>
+
 <div class="flex items-center mt-4">
     <Check bind:check={$DataBase.useSayNothing} name={language.sayNothing}> <Help key="sayNothing"/></Check>
 </div>

src/ts/storage/database.ts

@@ -376,7 +376,7 @@ export function setDatabase(data:Database){
     data.modules ??= []
     data.enabledModules ??= []
     data.additionalParams ??= []
-    data.heightMode ??= 0
+    data.heightMode ??= 'normal'
 
     changeLanguage(data.language)
     DataBase.set(data)
@@ -603,7 +603,7 @@ export interface Database{
     sideMenuRerollButton?:boolean
     requestInfoInsideChat?:boolean
     additionalParams:[string, string][]
-    heightMode:number
+    heightMode:string
 }
 
 export interface customscript{

src/ts/storage/globalApi.ts

@@ -475,6 +475,7 @@ export async function loadData() {
             updateColorScheme()
             updateTextTheme()
             updateAnimationSpeed()
+            updateHeightMode()
             if(db.botSettingAtStart){
                 botMakerMode.set(true)
             }
@@ -1571,4 +1572,29 @@ export function trimNonLatin(data:string){
     return data .replace(/[^\x00-\x7F]/g, "")
                 .replace(/ +/g, ' ')
                 .trim()
+}
+
+export function updateHeightMode(){
+    const db = get(DataBase)
+    const root = document.querySelector(':root') as HTMLElement;
+    switch(db.heightMode){
+        case 'auto':
+            root.style.setProperty('--risu-height-size', '100%');
+            break
+        case 'vh':
+            root.style.setProperty('--risu-height-size', '100vh');
+            break
+        case 'dvh':
+            root.style.setProperty('--risu-height-size', '100dvh');
+            break
+        case 'lvh':
+            root.style.setProperty('--risu-height-size', '100lvh');
+            break
+        case 'svh':
+            root.style.setProperty('--risu-height-size', '100svh');
+            break
+        case 'percent':
+            root.style.setProperty('--risu-height-size', '100%');
+            break
+    }
 }