From 65aac9b44fa89c969b9e6fa770f3898a795c065a Mon Sep 17 00:00:00 2001
From: Denis Bykhov <bykhov.denis@gmail.com>
Date: Sat, 11 Feb 2023 23:17:17 +0600
Subject: [PATCH] Fix table footer (#2619)

Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>
---
 .../src/components/Table.svelte               | 23 ++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/plugins/view-resources/src/components/Table.svelte b/plugins/view-resources/src/components/Table.svelte
index e7236b964c..a113b83349 100644
--- a/plugins/view-resources/src/components/Table.svelte
+++ b/plugins/view-resources/src/components/Table.svelte
@@ -26,6 +26,7 @@
     IconUp,
     Label,
     Loading,
+    resizeObserver,
     showPopup,
     Spinner
   } from '@hcengineering/ui'
@@ -211,12 +212,22 @@
     const key = attribute.castRequest ? attribute.key.substring(attribute.castRequest.length + 1) : attribute.key
     return (value: any) => onChange(value, doc, key, attr)
   }
+
+  let width: number
 </script>
 
 {#await buildModel({ client, _class, keys: config, lookup })}
   <Loading />
 {:then model}
-  <table id={tableId} class="antiTable" class:metaColumn={enableChecking || showNotification} class:highlightRows>
+  <table
+    id={tableId}
+    use:resizeObserver={(element) => {
+      width = element.clientWidth
+    }}
+    class="antiTable"
+    class:metaColumn={enableChecking || showNotification}
+    class:highlightRows
+  >
     {#if !hiddenHeader}
       <thead class="scroller-thead">
         <tr class="scroller-thead__tr">
@@ -350,7 +361,8 @@
   {#if loading > 0}<Loading />{/if}
 {/await}
 {#if showFooter && total}
-  <div class="footer">
+  <div class="space" />
+  <div class="footer" style="width: {width}px;">
     <div class="content" class:padding={showNotification || enableChecking}>
       <Label label={view.string.Total} />: {total}
       {#if objects.length > 0 && objects.length < total}
@@ -361,12 +373,17 @@
 {/if}
 
 <style lang="scss">
+  .space {
+    flex-grow: 1;
+    height: 100%;
+  }
+
   .footer {
     width: 100%;
     background-color: var(--body-color);
     display: flex;
     align-items: flex-end;
-    height: 100%;
+    height: 2.5rem;
     z-index: 2;
     position: sticky;
     bottom: 0;