From a5a1c9dfec8d59fd904f65ef10a3ae8255caa542 Mon Sep 17 00:00:00 2001 From: Alexey Morozov Date: Tue, 21 Oct 2025 19:43:56 +0300 Subject: [PATCH] Make dialogs fill the available viewport when the viewport width is small: * Add `--reactodia-dialog-viewport-breakpoint-s` CSS variable with default value `600px` to fill the viewport if the available width is less or equal to that value. --- CHANGELOG.md | 6 +++ examples/resources/template.ejs | 3 ++ src/editor/overlayController.tsx | 65 +++++++++++++++++++++++++++++--- src/widgets/dialog.tsx | 17 ++++++--- styles/theme/_common.scss | 1 + styles/theme/_theme.scss | 1 + styles/widgets/_dialog.scss | 10 +++++ webpackServe.js | 2 +- 8 files changed, 94 insertions(+), 11 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 47291bd9..481cc85e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,12 @@ All notable changes to the Reactodia will be documented in this document. The format is based on [Keep a Changelog](http://keepachangelog.com/) and this project adheres to [Semantic Versioning](http://semver.org/). ## [Unreleased] +#### 🚀 New Features +- Add `EditorController.applyAuthoringChanges()` method to apply current authoring changes to the diagram (i.e. change entity data, delete relations, etc) and reset the change state to be empty. + +#### 💅 Polish +- Make dialogs fill the available viewport when the viewport width is small: + * This is controlled by new CSS property `--reactodia-dialog-viewport-breakpoint-s` with default value `600px` which makes dialog fill the viewport if the available width is less or equal to that value. ## [0.30.1] - 2025-06-27 #### 🐛 Fixed diff --git a/examples/resources/template.ejs b/examples/resources/template.ejs index 3474ce28..85438778 100644 --- a/examples/resources/template.ejs +++ b/examples/resources/template.ejs @@ -37,6 +37,9 @@ :root[data-border-radius-zero] .reactodia-workspace { --reactodia-border-radius-base: unset; } + .reactodia-paper-area { + outline: none; + }