test: Adapt playwright test to new office selector

Signed-off-by: Julius Knorr <jus@bitgrid.net>

php/public/style.css

@@ -28,7 +28,7 @@
     --border-radius-large: 12px;
     --default-font-size: 13px;
     --checkbox-size: 16px;
-    --max-width: 500px;
+    --max-width: 580px;
     --container-top-margin: 20px;
     --container-bottom-margin: 20px;
     --container-padding: 2px;
@@ -37,9 +37,9 @@
     --main-padding: 50px;
 }
 
-/* Breakpoint calculation: 500px (max-width) + 100px (main-padding * 2) + 200px (additional space) = 800px
+/* Breakpoint calculation: 800px (max-width) + 100px (main-padding * 2) + 200px (additional space) = 1100px
 Note: Unfortunately, it's not possible to calculate this dynamically using CSS variables in media queries */
-@media only screen and (max-width: 800px) {
+@media only screen and (max-width: 1100px) {
     :root {
         --container-top-margin: 50px;
         --container-bottom-margin: 0px;

php/tests/tests/initial-setup.spec.js

@@ -32,12 +32,12 @@ test('Initial setup', async ({ page: setupPage }) => {
   await containersPage.locator('#talk').uncheck();
   await containersPage.getByRole('checkbox', { name: 'Whiteboard' }).uncheck();
   await containersPage.getByRole('checkbox', { name: 'Imaginary' }).uncheck();
-  await containersPage.getByRole('checkbox', { name: 'Collabora' }).uncheck();
+  await containersPage.getByText('Disable office suite').click();
   await containersPage.getByRole('button', { name: 'Save changes' }).click();
   await expect(containersPage.locator('#talk')).not.toBeChecked()
   await expect(containersPage.getByRole('checkbox', { name: 'Whiteboard' })).not.toBeChecked()
   await expect(containersPage.getByRole('checkbox', { name: 'Imaginary' })).not.toBeChecked()
-  await expect(containersPage.getByRole('checkbox', { name: 'Collabora' })).not.toBeChecked()
+  await expect(containersPage.locator('#office-none')).toBeChecked()
 
   // Reject invalid time zones
   await containersPage.locator('#timezone').click();