styles related to #id_tray & apparatus separated out into _tray.scss; new tray.js computes the cell size of the tray grid for item organization; room.html now sports the grid as a separate div so as not to interfere w. tray styling or size; new tests in FTs.test_room_tray

src/functional_tests/test_room_tray.py

@@ -230,3 +230,106 @@ class TrayTest(FunctionalTest):
         self.wait_for(
             lambda: self.assertTrue(self.browser.execute_script("return Tray.isOpen()"))
         )
+
+    # ------------------------------------------------------------------ #
+    # Test T8 — portrait: 1 column × 8 rows of square cells              #
+    # ------------------------------------------------------------------ #
+
+    def test_tray_grid_is_1_column_by_8_rows_in_portrait(self):
+        room = self._make_sig_select_room()
+        self.create_pre_authenticated_session("founder@test.io")
+        self.browser.get(self._room_url(room))
+
+        btn = self.wait_for(lambda: self.browser.find_element(By.ID, "id_tray_btn"))
+        self._simulate_drag(btn, -300)
+        self.wait_for(
+            lambda: self.assertTrue(
+                self.browser.find_element(By.ID, "id_tray").is_displayed()
+            )
+        )
+
+        cells = self.browser.find_elements(By.CSS_SELECTOR, "#id_tray_grid .tray-cell")
+        self.assertEqual(len(cells), 8)
+
+        # 8 explicit rows set via grid-template-rows
+        row_count = self.browser.execute_script("""
+            var s = getComputedStyle(document.getElementById('id_tray_grid'));
+            return s.gridTemplateRows.trim().split(/\\s+/).length;
+        """)
+        self.assertEqual(row_count, 8)
+
+        # All 8 cells share the same x position — one column only
+        xs = {round(c.location['x']) for c in cells}
+        self.assertEqual(len(xs), 1)
+
+        # Cells are square
+        cell = cells[0]
+        self.assertAlmostEqual(cell.size['width'], cell.size['height'], delta=2)
+
+    # ------------------------------------------------------------------ #
+    # Test T9 — landscape: 8 columns × 1 row of square cells             #
+    # ------------------------------------------------------------------ #
+    # T9a — column/row count (structure)
+    def test_tray_grid_is_8_columns_by_1_row_in_landscape(self):
+        room = self._make_sig_select_room()
+        self.create_pre_authenticated_session("founder@test.io")
+        self.browser.set_window_size(900, 500)
+        self.browser.get(self._room_url(room))
+
+        btn = self.wait_for(lambda: self.browser.find_element(By.ID, "id_tray_btn"))
+        self._simulate_drag_y(btn, 300)
+        self.wait_for(
+            lambda: self.assertTrue(self.browser.execute_script("return Tray.isOpen()"))
+        )
+
+        cells = self.browser.find_elements(By.CSS_SELECTOR, "#id_tray_grid .tray-cell")
+        self.assertEqual(len(cells), 8)
+
+        # 8 explicit columns set via grid-template-columns
+        col_count = self.browser.execute_script("""
+            var s = getComputedStyle(document.getElementById('id_tray_grid'));
+            return s.gridTemplateColumns.trim().split(/\\s+/).length;
+        """)
+        self.assertEqual(col_count, 8)
+
+        # All 8 cells share the same y position — one row only
+        ys = {round(c.location['y']) for c in cells}
+        self.assertEqual(len(ys), 1)
+
+        # Cells are square
+        cell = cells[0]
+        self.assertAlmostEqual(cell.size['width'], cell.size['height'], delta=2)
+
+    # ------------------------------------------------------------------ #
+    # Test T9b — landscape: all 8 cells visible within the tray interior #
+    # ------------------------------------------------------------------ #
+
+    def test_landscape_tray_all_8_cells_visible(self):
+        room = self._make_sig_select_room()
+        self.create_pre_authenticated_session("founder@test.io")
+        self.browser.set_window_size(900, 500)
+        self.browser.get(self._room_url(room))
+
+        btn = self.wait_for(lambda: self.browser.find_element(By.ID, "id_tray_btn"))
+        self._simulate_drag_y(btn, 300)
+        self.wait_for(
+            lambda: self.assertTrue(self.browser.execute_script("return Tray.isOpen()"))
+        )
+
+        tray = self.browser.find_element(By.ID, "id_tray")
+        cells = self.browser.find_elements(By.CSS_SELECTOR, "#id_tray_grid .tray-cell")
+        self.assertEqual(len(cells), 8)
+
+        tray_right  = tray.location['x'] + tray.size['width']
+        tray_bottom = tray.location['y'] + tray.size['height']
+
+        # Each cell must fit within the tray interior (2px rounding slack)
+        for cell in cells:
+            self.assertLessEqual(
+                cell.location['x'] + cell.size['width'], tray_right + 2,
+                msg="Cell overflows tray right edge"
+            )
+            self.assertLessEqual(
+                cell.location['y'] + cell.size['height'], tray_bottom + 2,
+                msg="Cell overflows tray bottom edge"
+            )