Usertest: add 'back to theme overview'-button on theme intro page, fix #1457

UI/Base/TabbedGroup.svelte

@@ -17,7 +17,7 @@
   }
 </script>
 
-<div class="tabbedgroup h-full w-full">
+<div class="tabbedgroup h-full flex w-full">
   <TabGroup
     class="flex h-full w-full flex-col"
     defaultIndex={1}
@@ -67,23 +67,23 @@
       </TabList>
       <slot name="post-tablist" />
     </div>
-    <div class="normal-background overflow-y-auto">
+    <div class="normal-background overflow-y-auto h-full">
-      <TabPanels defaultIndex={$tab}>
+      <TabPanels class="tabpanels" defaultIndex={$tab}>
-        <TabPanel>
+        <TabPanel class="tabpanel">
           <slot name="content0">
             <div>Empty</div>
           </slot>
         </TabPanel>
-        <TabPanel>
+        <TabPanel class="tabpanel">
           <slot name="content1" />
         </TabPanel>
-        <TabPanel>
+        <TabPanel class="tabpanel">
           <slot name="content2" />
         </TabPanel>
-        <TabPanel>
+        <TabPanel class="tabpanel">
           <slot name="content3" />
         </TabPanel>
-        <TabPanel>
+        <TabPanel class="tabpanel">
           <slot name="content4" />
         </TabPanel>
       </TabPanels>
@@ -97,6 +97,15 @@
     height: 100%;
   }
   
+  :global(.tabpanel) {
+    height:100%;
+  }
+
+  :global(.tabpanels) {
+    height: calc( 100% - 2rem );
+  }
+
+
   :global(.tab) {
     margin: 0.25rem;
     padding: 0.25rem;

UI/BigComponents/ThemeIntroPanel.svelte

@@ -11,6 +11,7 @@
     import {UIEventSource} from "../../Logic/UIEventSource"
     import {SearchIcon} from "@rgossiaux/svelte-heroicons/solid"
     import {twJoin} from "tailwind-merge"
+    import {Utils} from "../../Utils";
 
     /**
      * The theme introduction panel
@@ -38,6 +39,11 @@
     }
 </script>
 
+<div class="flex flex-col justify-between h-full">
+
+    <div>
+
+        <!-- Intro, description, ... -->
         <Tr t={layout.description}/>
         <Tr t={Translations.t.general.welcomeExplanation.general}/>
         {#if layout.layers.some((l) => l.presets?.length > 0)}
@@ -46,10 +52,10 @@
             </If>
         {/if}
 
-<!--toTheMap,
-loginStatus.SetClass("block mt-6 pt-2 md:border-t-2 border-dotted border-gray-400"),
--->
         <Tr t={layout.descriptionTail}/>
+      
+      
+        <!-- Buttons: open map, go to location, search -->
         <NextButton clss="primary w-full" on:click={() => state.guistate.themeIsOpened.setData(false)}>
             <div class="flex w-full justify-center text-2xl">
                 <Tr t={Translations.t.general.openTheMap}/>
@@ -86,3 +92,13 @@ loginStatus.SetClass("block mt-6 pt-2 md:border-t-2 border-dotted border-gray-40
                 </button>
             </div>
         </div>
+    </div>
+  
+    <div class="links-as-button links-w-full m-2 flex flex-col gap-y-1">
+    <!-- bottom buttons, a bit hidden away: switch layout -->
+    <a class="flex" href={Utils.HomepageLink()}>
+      <img class="h-6 w-6" src="./assets/svg/add.svg"/>
+      <Tr t={Translations.t.general.backToIndex}/>
+    </a>
+  </div>
+</div>

UI/ThemeViewGUI.svelte

@@ -269,7 +269,7 @@
                 <Tr t={layout.title}/>
             </div>
 
-            <div class="m-4" slot="content0">
+            <div class="m-4 h-full" slot="content0">
                 <ThemeIntroPanel {state}/>
             </div>