The dialog width is not being adjusted based on the screen type.

[Nstd]

Bug report

The getScreenTypeForWidth method in the WoltBreakpoints determines the screen type base on the screenWidth parameter.

wolt_modal_sheet/lib/src/utils/wolt_breakpoints.dart

Lines 12 to 21 in 43e90ae

	static WoltBreakpoints getScreenTypeForWidth(double screenWidth) {
	for (var screenType in WoltBreakpoints.values) {
	if (screenWidth >= screenType.minValue &&
	screenWidth <= screenType.maxValue) {
	return screenType;
	}
	}
	// Default to small if no match is found.
	return WoltBreakpoints.small;
	}

However, the layoutModal method in WoltDialogType use WoltBreakpoints.small as the screen type for all screen scenarios.
This means that regardless of the actual screen width, it always displays dialogs as if on a small screen. Is this a bug?

wolt_modal_sheet/lib/src/modal_type/wolt_dialog_type.dart

Lines 50 to 82 in 43e90ae

	@override
	BoxConstraints layoutModal(Size availableSize) {
	const double minModalHeight = 360.0;
	final double minModalWidth = WoltBreakpoints.small.minValue;
	const double verticalBreakpoint = minModalHeight + minPadding;
	final double horizontalBreakpoint = minModalWidth + minPadding;
	final double availableWidth = availableSize.width;
	final double availableHeight = availableSize.height;
	double width;
	if (availableWidth > horizontalBreakpoint) {
	width = minModalWidth;
	} else {
	width = max(0, availableWidth - minPadding);
	}
	if (availableHeight >= verticalBreakpoint) {
	return BoxConstraints(
	minWidth: width,
	maxWidth: width,
	minHeight: 0,
	maxHeight: max(360, availableHeight * 0.8),
	);
	}
	return BoxConstraints(
	minWidth: width,
	maxWidth: width,
	minHeight: 0,
	maxHeight: availableHeight * 0.8,
	);
	}

Steps to reproduce

Steps to reproduce the behavior:

1. Go to '...'
2. '...'
3. See error or incorrect behavior

Expected behavior

A clear and concise description of what you expected to happen.

---

Additional context

Add any other context about the problem here.

---

[ulusoyca]

hi @Nstd

Just to clarify, if you want responsive behavior you need to set this parameter:

WoltModalSheet.show(
  context: context,
  modalTypeBuilder: (BuildContext context) {
    final width = MediaQuery.sizeOf(context).width;
    if (width < 523) {
      return WoltModalType.bottomSheet();
    } else if (width < 800) {
      return WoltModalType.dialog();
    } else {
      return WoltModalType.sideSheet();
    },
    ...
},

https://pub.dev/packages/wolt_modal_sheet#modal-type-responsiveness

[Nstd]

@ulusoyca Thank you for your reply.

My goal is to use ​BottomSheet​ when the screen width is less than 523 pixels, and ​a dialog​ in all other cases, with the dialog dynamically adapting its size based on the screen width.