Fixed popup placement, size and scaling

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Content.svelte

@@ -1,13 +0,0 @@
-<script>
-    import { getContext } from 'svelte';
-    import Popup from './Popup.svelte';
-    const { open } = getContext('simple-modal');
-    const showSurprise = () => open(Popup, { message: "It's aff modal!" });
-</script>
-
-<div id="logout" role="button"
-     tabindex="0"
-     on:click={showSurprise}
-     on:keydown={() => console.log("keydown")}>
-    Log out
-</div>

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Expenses.svelte

@@ -1,13 +1,14 @@
 <script>
+    import Modal from 'svelte-simple-modal';
+    import Content from "./contents/ContentExpense.svelte";
+
     import { onMount, afterUpdate } from 'svelte';
     import axios from 'axios';
     import { getCookie } from "svelte-cookie";
 
-    import Modal from 'svelte-simple-modal';
-    import Content from "./Content.svelte";
-
     let data = [];
     let parentHeight;
+    let listParentHeight;
 
     onMount(async () => {
         const token = getCookie('access_token');
@@ -29,16 +30,16 @@
 
     afterUpdate(() => {
         parentHeight = document.querySelector('#expenseInfo').offsetHeight;
+        listParentHeight = document.querySelector('#expenseList').offsetHeight;
     });
 </script>
 
 <div id="expenseInfo" style="max-height: {parentHeight}px;">
-    <div id="options">
+    <div id="modal">
-        <h2>Incomes</h2>
         <Modal><Content /></Modal>
     </div>
 
-    <div id="expenseList">
+    <div id="expenseList" style="max-height: {listParentHeight}px;">
         <ul>
             {#each data as item}
                 <li>
@@ -51,29 +52,25 @@
     </div>
 </div>
 
-<style>
 
+<style>
     #expenseInfo {
-        flex: 1;
+        display: flex;
-        border-radius: 10px;
+        flex-direction: column;
-        margin: 10px;
-        overflow-y: auto;
-        max-height: 100%;
     }
 
-    #options {
+    #modal {
         position: sticky;
-        top: 0;
-        background-color: #f2f2f2;
-        padding: 0 0 10px;
-        margin: 0;
-        border-radius: 10px 10px 0 0;
-        z-index: 1;
     }
 
     #expenseList {
         margin-top: 10px;
         scrollbar-width: none;
+        flex: 1;
+        border-radius: 10px;
+        margin: 10px;
+        overflow-y: auto;
+        max-height: 100%;
     }
 
     #expenseList::-webkit-scrollbar {

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Incomes.svelte

@@ -1,5 +1,5 @@
 <script>
-    import Content from './Content.svelte';
+    import Content from './contents/ContentIncome.svelte';
     import Modal from 'svelte-simple-modal';
 
     import { onMount, afterUpdate } from 'svelte';
@@ -8,6 +8,7 @@
 
     let data = [];
     let parentHeight;
+    let listParentHeight;
 
     onMount(async () => {
         const token = getCookie('access_token');
@@ -29,17 +30,16 @@
 
     afterUpdate(() => {
         parentHeight = document.querySelector('#incomeInfo').offsetHeight;
+        listParentHeight = document.querySelector('#expenseList').offsetHeight;
     });
 </script>
 
 <div id="incomeInfo" style="max-height: {parentHeight}px;">
-    <div id="incomeOptions">
+    <div id="modal">
-        <h2>Incomes</h2>
         <Modal><Content /></Modal>
     </div>
 
-
+    <div id="incomeList" style="max-height: {listParentHeight}px;">
-    <div id="incomeList">
         <ul>
             {#each data as item}
                 <li>
@@ -53,18 +53,18 @@
 </div>
 
 <style>
-    #incomeOptions {
+    #modal {
-
+        position: sticky;
-        top: 0;
-        background-color: #f2f2f2;
-        padding: 10px;
-        border-radius: 10px 10px 0 0;
-        z-index: 1;
-        padding: 0 0 10px;
-        margin: 0;
     }
 
     #incomeInfo {
+        display: flex;
+        flex-direction: column;
+    }
+
+    #incomeList {
+        margin-top: 10px;
+        scrollbar-width: none;
         flex: 1;
         border-radius: 10px;
         margin: 10px;
@@ -72,10 +72,6 @@
         max-height: 100%;
     }
 
-    #incomeList {
-        margin-top: 10px;
-    }
-
     ul {
         list-style: none;
         padding: 0;
@@ -94,4 +90,7 @@
         box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
     }
 
+    #incomeList::-webkit-scrollbar {
+        display: none;
+    }
 </style>

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/contents/ContentExpense.svelte

@@ -0,0 +1,33 @@
+<script>
+    import { getContext } from 'svelte';
+    import Popup from '../popups/IncomePopup.svelte';
+    const { open } = getContext('simple-modal');
+    const showSurprise = () => open(Popup, { message: "It's EXOENSE!" });
+</script>
+
+<div id="exp">
+    <h2>Expenses</h2>
+    <div id="openModal" role="button"
+         tabindex="0"
+         on:click={showSurprise}
+         on:keydown={() => console.log("keydown")}>
+        Log out
+    </div>
+</div>
+
+<style>
+    #exp {
+        position: sticky;
+    }
+
+    #openModal {
+        top: 0;
+        position: sticky;
+        background-color: #f2f2f2;
+        padding: 10px;
+        border-radius: 10px 10px 0 0;
+        z-index: 1;
+        padding: 0 0 10px;
+        margin: 0;
+    }
+</style>

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/contents/ContentIncome.svelte

@@ -0,0 +1,33 @@
+<script>
+    import { getContext } from 'svelte';
+    import Popup from '../popups/IncomePopup.svelte';
+    const { open } = getContext('simple-modal');
+    const showSurprise = () => open(Popup, { message: "It's aINCOME!" });
+</script>
+
+<div id="inc">
+    <h2>Incomes</h2>
+    <div id="openModal" role="button"
+         tabindex="0"
+         on:click={showSurprise}
+         on:keydown={() => console.log("keydown")}>
+        Log out
+    </div>
+</div>
+
+<style>
+    #inc {
+        position: sticky;
+    }
+
+    #openModal {
+        top: 0;
+        position: sticky;
+        background-color: #f2f2f2;
+        padding: 10px;
+        border-radius: 10px 10px 0 0;
+        z-index: 1;
+        padding: 0 0 10px;
+        margin: 0;
+    }
+</style>

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/popups/IncomePopup.svelte

@@ -0,0 +1,5 @@
+<script>
+    export let message = 'Hi';
+</script>
+
+<p>🎉 {message} 🍾</p>