Add sticky footer

[DeMiro5001]

Hello everyone and thank you for this nice app.
I would like to add a sticky footer at the bottom of the dashboard to link to "terms of use" and "privacy policy". I tried with a notebook widget but it wasn't really what I was expecting.
May be I was doing it wrong. Any help would be appreciated.
Thanks a lot

[SeDemal]

I don't know if there's an easy or elegant way of implementing this.
If I may though, what about the notebook made it lackluster?
Is it that you want it to show at all times like the header or is it just the way it looks?
Because if it's #2, then there might be a solution using custom CSS.

[DeMiro5001]

I have left it in a notebook for the moment because I had to move forward to another project.
Yes I was thinking of a footer similar to the header, may be with html or markdown support (so I can add links to tos and pp pages), that it is always shown. One line is enough.

[SeDemal]

Alright, as I've said there's no comfortable way of implementing this, but it seems like it can still be done in CSS using fixed position for the notebook.
I'll post the CSS once I think I have it down properly.

[SeDemal]

Well, that's one hell of a CSS.
The following requires you to only use a single notepad, otherwise I may need further trickery.
Steps:

• Add a notebook.
• Place it at the very end of your page, and make it take the whole width.
• Next, edit the notebook, add a table with how many columns you want, your links, etc... (basically design your footer here, don't worry about the table's borders). The table is only necessary if you want to put links on both sides of the footer, if you only want on the right, then simply right align the text.
• Once you are happy with your design, save and go to custom CSS.
• Add the following CSS:

 .mantine-AppShell-root:has(.tabler-icon-edit-circle) {
  .grid-stack-item:has(.mantine-RichTextEditor-root) {
    min-height: unset !important;
    height: 48px !important;
    width: 100% !important;
    position: fixed;
    bottom: 0;
    left: 0;
    top: unset !important;
    z-index: 1000;
    .mantine-UnstyledButton-root {
      display: none;
    }
    .grid-stack-item-content {
      padding-inline: 16px;
      padding-block: 10px;
      inset: unset;
      bottom: 0;
      border-radius: 0;
      border-bottom: none;
      border-left: none;
      border-right: none;
      .mantine-RichTextEditor-root {
        justify-content: center;
        .mantine-ScrollArea-root {
          padding: 0;
          min-height: unset;
          .mantine-ScrollArea-viewport {
            height: unset;
            padding: 0;
            .mantine-RichTextEditor-content {
              padding: 0;
              .tableWrapper {
                padding: 0;
                table {
                  border-style: hidden;
                  td {
                    border-style: hidden !important;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

You can Edit the height element to better fit your purpose.

If you have an empty 1 by 2 space somewhere, you can place you notebook there instead and add the following CSS:

body {
  --mantine-footer-height: 45px;
}

This solution is better for the space it takes after, but it forces you to keep what looks like an empty 1*2 space