diff --git a/src/functional_tests/test_room_tray.py b/src/functional_tests/test_room_tray.py
index c90fdbd..496755c 100644
--- a/src/functional_tests/test_room_tray.py
+++ b/src/functional_tests/test_room_tray.py
@@ -30,6 +30,11 @@ from apps.lyric.models import User
 
 class TrayTest(FunctionalTest):
 
+    def setUp(self):
+        super().setUp()
+        # Portrait viewport for T1–T5; landscape tests (T6, T7) override this.
+        self.browser.set_window_size(768, 1024)
+
     def _simulate_drag(self, btn, offset_x):
         """Dispatch JS pointer events directly — more reliable than GeckoDriver drag."""
         start_x = btn.rect['x'] + btn.rect['width'] / 2
diff --git a/src/static/tests/TraySpec.js b/src/static/tests/TraySpec.js
index a442056..2523024 100644
--- a/src/static/tests/TraySpec.js
+++ b/src/static/tests/TraySpec.js
@@ -84,13 +84,26 @@ describe("Tray", () => {
     describe("close()", () => {
         beforeEach(() => Tray.open());
 
-        it("hides #id_tray after the slide transition completes", () => {
+        it("hides #id_tray after slide + snap both complete", () => {
             Tray.close();
-            // display:none is deferred until transitionend — fire it manually.
             wrap.dispatchEvent(new TransitionEvent("transitionend", { propertyName: "left" }));
+            wrap.dispatchEvent(new Event("animationend"));
             expect(tray.style.display).toBe("none");
         });
 
+        it("adds .snap to wrap after slide transition completes", () => {
+            Tray.close();
+            wrap.dispatchEvent(new TransitionEvent("transitionend", { propertyName: "left" }));
+            expect(wrap.classList.contains("snap")).toBe(true);
+        });
+
+        it("removes .snap from wrap once animationend fires", () => {
+            Tray.close();
+            wrap.dispatchEvent(new TransitionEvent("transitionend", { propertyName: "left" }));
+            wrap.dispatchEvent(new Event("animationend"));
+            expect(wrap.classList.contains("snap")).toBe(false);
+        });
+
         it("removes .open from #id_tray_btn", () => {
             Tray.close();
             expect(btn.classList.contains("open")).toBe(false);
@@ -267,6 +280,19 @@ describe("Tray", () => {
                 const closedTop = parseInt(wrap.style.top, 10);
                 expect(closedTop).toBeLessThan(openTop);
             });
+
+            it("adds .snap to wrap after top transition completes", () => {
+                Tray.close();
+                wrap.dispatchEvent(new TransitionEvent("transitionend", { propertyName: "top" }));
+                expect(wrap.classList.contains("snap")).toBe(true);
+            });
+
+            it("removes .snap from wrap once animationend fires", () => {
+                Tray.close();
+                wrap.dispatchEvent(new TransitionEvent("transitionend", { propertyName: "top" }));
+                wrap.dispatchEvent(new Event("animationend"));
+                expect(wrap.classList.contains("snap")).toBe(false);
+            });
         });
 
         // ── drag — Y axis ──────────────────────────────────────────────── //