{/* 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 { Meta, Story, Canvas } from "@storybook/blocks";
import * as Resizing from "./Resizing.stories";

<Meta title="MDX/Features/Resizing/Overview" of={Resizing} />

# Resizing

The boxed expression component gives the possibility to resize almost every cell in a column.
The resize operation recursively affects all nested expressions in the same column
keeping the resize operation consistent.

The column should have an entry or an expression on it so the resize operation can be performed. It's not possible
to resize index cells, or a column with only empty expressions.

To perform the resize operation hover the mouse on a cell of the desired column.
A resize handle on the right side of the cell will appear. Right-clicking on it and dragging
will resize the cell. The minimum depends on the expression or column. It does not have a maximum width.

<div style={{ display: "flex", flexDirection: "row" }}>
  <Story of={Resizing.CanDrive} />
  <small>
    <br />
    <br />
    This example brings a [Boxed Literal](/docs/boxed-expressions-literal--overview) expression with a 500px width.
  </small>
</div>

On nested expressions, the default minimal size of a column will be changed according to the
minimal size of the expression. e.g. a nested decision table can't have a minor size than
the sum of the minimal size of its columns.

<div style={{ display: "flex", flexDirection: "column" }}>
  <Story of={Resizing.Nested} />
  <small>
    This example brings a [Boxed Context](/docs/boxed-expressions-context--overview) expression with nested expressions
    of different sizes.
  </small>
</div>

# Reset

To reset the size of a column hover the mouse on a cell of the column.
The resize handle on the right side of the cell will appear. Double right-clicking on it will
reset the column size to the default value. It's important to notice that the default size
can vary depending on nested expressions.