Merge pull request #1611 from vector-im/dbkr/depthlimit

Re-enable livekit rageshake logging & with depth limit

.github/workflows/netlify-fullmesh.yaml

@@ -60,7 +60,7 @@ jobs:
 
       - name: Deploy to Netlify
         id: netlify
-        uses: nwtgck/actions-netlify@v1.2.4
+        uses: nwtgck/actions-netlify@v2.1.0
         with:
           publish-dir: dist
           deploy-message: "Deploy from GitHub Actions"

.github/workflows/netlify-livekit.yaml

@@ -60,7 +60,7 @@ jobs:
 
       - name: Deploy to Netlify
         id: netlify
-        uses: nwtgck/actions-netlify@v1.2.4
+        uses: nwtgck/actions-netlify@v2.1.0
         with:
           publish-dir: dist
           deploy-message: "Deploy from GitHub Actions"

.github/workflows/netlify-pr.yaml

@@ -53,7 +53,7 @@ jobs:
 
       - name: ☁️ Deploy to Netlify
         id: netlify
-        uses: nwtgck/actions-netlify@v1.2
+        uses: nwtgck/actions-netlify@v2.1
         with:
           publish-dir: webapp
           deploy-message: "Deploy from GitHub Actions"

package.json

@@ -63,7 +63,7 @@
     "mermaid": "^9.0.0",
     "normalize.css": "^8.0.1",
     "pako": "^2.0.4",
-    "postcss-preset-env": "^7",
+    "postcss-preset-env": "^9.0.0",
     "posthog-js": "^1.29.0",
     "re-resizable": "^6.9.0",
     "react": "18",

src/room/InCallView.module.css

@@ -17,18 +17,18 @@ limitations under the License.
 .inRoom {
   display: flex;
   flex-direction: column;
-  overflow: hidden;
-  min-height: 100%;
   height: 100%;
   width: 100%;
-  --footerPadding: var(--cpd-space-4x);
-  --footerHeight: calc(50px + 2 * var(--footerPadding));
 }
 
 .controlsOverlay {
   position: relative;
   flex: 1;
   display: flex;
+  flex-direction: column;
+  overflow: auto;
+  overflow-inline: hidden;
+  contain: strict;
 }
 
 .centerMessage {
@@ -45,17 +45,15 @@ limitations under the License.
 }
 
 .footer {
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  box-sizing: border-box;
+  position: sticky;
+  inset-block-end: 0;
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   grid-template-areas: "logo buttons layout";
   align-items: center;
   gap: var(--cpd-space-3x);
-  padding: var(--footerPadding) var(--inline-content-inset);
+  padding-block: var(--cpd-space-4x);
+  padding-inline: var(--inline-content-inset);
   background: linear-gradient(
     180deg,
     rgba(0, 0, 0, 0) 0%,
@@ -84,14 +82,14 @@ limitations under the License.
 }
 
 @media (min-height: 400px) {
-  .inRoom {
-    --footerPadding: var(--cpd-space-10x);
+  .footer {
+    padding-block: var(--cpd-space-10x);
   }
 }
 
 @media (min-height: 800px) {
-  .inRoom {
-    --footerPadding: var(--cpd-space-15x);
+  .footer {
+    padding-block: var(--cpd-space-15x);
   }
 }
 

src/room/LayoutToggle.module.css

@@ -18,6 +18,7 @@ limitations under the License.
   padding: 2px;
   border: 1px solid var(--cpd-color-border-interactive-secondary);
   border-radius: var(--cpd-radius-pill-effect);
+  background: var(--cpd-color-bg-canvas-default);
   box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.5);
   display: flex;
 }

src/room/LobbyView.module.css

@@ -23,7 +23,6 @@ limitations under the License.
   flex: 1;
   overflow: hidden;
   height: 100%;
-  padding-block-end: var(--footerHeight);
 }
 
 @media (max-width: 500px) {

src/video-grid/NewVideoGrid.module.css

@@ -15,14 +15,11 @@ limitations under the License.
 */
 
 .grid {
-  contain: strict;
+  contain: layout style;
   position: relative;
   flex-grow: 1;
   margin-inline: var(--inline-content-inset);
-  padding-block-end: var(--footerHeight);
-  margin-block-start: var(--cpd-space-4x);
-  overflow-y: auto;
-  overflow-x: hidden;
+  margin-block: var(--cpd-space-4x);
 }
 
 .slots {

src/video-grid/VideoGrid.module.css

@@ -19,5 +19,4 @@ limitations under the License.
   overflow: hidden;
   flex: 1;
   touch-action: none;
-  margin-bottom: var(--footerHeight);
 }

src/video-grid/VideoTile.module.css

@@ -43,7 +43,8 @@ limitations under the License.
 }
 
 .videoTile.speaking {
-  outline: 4px solid var(--cpd-color-border-accent);
+  /* !important because speaking border should take priority over hover */
+  outline: 4px solid var(--cpd-color-border-accent) !important;
 }
 
 @media (hover: hover) {