fix(ui): improve layout stability and refactor trade detail styles
All checks were successful
Frontend CI / ota-android (push) Successful in 1m34s
Frontend CI / ota-ios (push) Successful in 1m34s
Frontend CI / build-and-push-web (push) Successful in 3m27s
Frontend CI / build-android-apk (push) Successful in 1h22m22s

- fix schedule screen layout by measuring day width on web to prevent overflow
- add overflow hidden to schedule grid cells
- refactor trade detail screen styles for better organization and readability
- update trade detail seller card and avatar components
- expand trade type and status maps in trade detail screen
This commit is contained in:
2026-05-06 00:45:04 +08:00
parent d879eea7d1
commit 64493baf7f
2 changed files with 607 additions and 298 deletions

View File

@@ -199,6 +199,7 @@ export const ScheduleScreen: React.FC = () => {
return Math.max(DEFAULT_SECTION_HEIGHT, calculatedHeight);
}, [screenHeight, isMobile, insets.bottom]);
const [isAddModalVisible, setIsAddModalVisible] = useState(false);
const [measuredDayWidth, setMeasuredDayWidth] = useState<number | null>(null);
const [pendingDay, setPendingDay] = useState<number>(0);
const [pendingMergedSection, setPendingMergedSection] = useState<number>(1);
const [newCourseName, setNewCourseName] = useState('');
@@ -676,7 +677,9 @@ export const ScheduleScreen: React.FC = () => {
const height = duration * sectionHeight - 4;
const laneGap = 2;
const baseLeft = 2;
const availableWidth = dayColumnWidth - baseLeft * 2;
const baseRight = 2;
const effectiveDayWidth = measuredDayWidth ?? dayColumnWidth;
const availableWidth = effectiveDayWidth - baseLeft - baseRight;
const cardWidth =
laneCount > 1
? (availableWidth - laneGap * (laneCount - 1)) / laneCount
@@ -728,6 +731,9 @@ export const ScheduleScreen: React.FC = () => {
return (
<View
key={dayOfWeek}
onLayout={(e) => {
if (isWeb) setMeasuredDayWidth(e.nativeEvent.layout.width);
}}
style={[
styles.dayColumn,
{
@@ -1336,6 +1342,7 @@ function createScheduleStyles(colors: AppColors) {
backgroundColor: colors.background.default,
borderRightWidth: StyleSheet.hairlineWidth,
borderRightColor: colors.divider,
overflow: 'hidden',
},
gridCell: {
borderBottomWidth: StyleSheet.hairlineWidth,

File diff suppressed because it is too large Load Diff