codeant-ai-for-open-source[bot] commented on code in PR #37141: URL: https://github.com/apache/superset/pull/37141#discussion_r3658996845
########## superset-frontend/playwright/tests/mobile/mobile-navigation.spec.ts: ########## @@ -0,0 +1,192 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import { test, expect, devices } from '@playwright/test'; + +// NOTE: These tests exercise the mobile consumption experience and require +// the MOBILE_CONSUMPTION_MODE feature flag to be enabled in the target +// environment (FEATURE_FLAGS = {"MOBILE_CONSUMPTION_MODE": True}). +import { URL } from '../../utils/urls'; +import { TIMEOUT } from '../../utils/constants'; + +/** + * Mobile navigation tests verify the MobileRouteGuard behavior + * and mobile-specific navigation patterns. + * + * These tests run with a mobile viewport to trigger mobile-specific behavior. + */ + +// Use iPhone 12 viewport for mobile tests +const mobileViewport = devices['iPhone 12']; + +test.describe('Mobile Navigation', () => { + test.use({ + viewport: mobileViewport.viewport, + userAgent: mobileViewport.userAgent, + }); + + test.beforeEach(async ({ page }) => { + await page.goto('/'); + }); Review Comment: ✅ **Customized review instruction saved!** **Instruction:** > Do not require mobile feature-flag setup in mobile Playwright specs when the chromium-mobile project already gates execution via playwright.config.ts and INCLUDE_MOBILE. **Applied to:** - `**/playwright/tests/mobile/**` --- 💡 *To manage or update this instruction, visit: [CodeAnt AI Settings](https://app.codeant.ai/org/settings/learnings)* ########## superset-frontend/src/components/ListView/CardCollection.tsx: ########## @@ -42,6 +43,18 @@ const CardContainer = styled.div<{ showThumbnails?: boolean }>` ? `${theme.sizeUnit * 8 + 3}px ${theme.sizeUnit * 20}px` : `${theme.sizeUnit * 8 + 1}px ${theme.sizeUnit * 20}px` }; + + /* Full-width cards on mobile (consumption mode) */ + ${ + isMobileConsumptionEnabled() + ? `@media (max-width: ${theme.screenSMMax}px) { + grid-template-columns: 1fr; + grid-gap: ${theme.sizeUnit * 4}px; + padding-left: ${theme.sizeUnit * 4}px; + padding-right: ${theme.sizeUnit * 4}px; + }` + : '' Review Comment: ✅ **Customized review instruction saved!** **Instruction:** > In Ant Design's default theme, treat screenSMMax as the 767px upper bound for the md breakpoint; use it when matching useIsMobile()'s below-768px behavior rather than assuming it represents the ~575px small-screen breakpoint. **Applied to:** - `superset-frontend/src/components/ListView/CardCollection.tsx` --- 💡 *To manage or update this instruction, visit: [CodeAnt AI Settings](https://app.codeant.ai/org/settings/learnings)* ########## superset-frontend/src/dashboard/components/DashboardBuilder/DashboardWrapper.tsx: ########## @@ -110,6 +111,22 @@ const StyledDiv = styled.div` i.warning { color: ${theme.colorWarning}; } + + /* Mobile consumption mode: show the full chart title without + truncation (controls and links are render-gated in SliceHeader) */ + ${ + isMobileConsumptionEnabled() + ? `@media (max-width: ${theme.screenSMMax}px) { + [data-test='slice-header'] .header-title { + -webkit-line-clamp: unset; + display: block; + white-space: normal; + overflow: visible; + text-overflow: unset; + } + }` + : '' + } Review Comment: ✅ **Customized review instruction saved!** **Instruction:** > When targeting the 768px mobile breakpoint used by useIsMobile(), use Ant Design's theme.screenSMMax token; do not treat it as the narrower ~575px sm breakpoint. **Applied to:** - `superset-frontend/src/dashboard/components/DashboardBuilder/DashboardWrapper.tsx` --- 💡 *To manage or update this instruction, visit: [CodeAnt AI Settings](https://app.codeant.ai/org/settings/learnings)* -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
