low mocks

e2e/rectangle-shape.spec.ts

@@ -12,13 +12,13 @@ test('has rectangle component', async ({ page }) => {
   await page.goto('');
   await page.getByText('Basic Shapes').click();
 
-  await expect(page.getByAltText('Rectangle')).toBeVisible();
+  await expect(page.getByAltText(/^Rectangle$/)).toBeVisible();
 });
 
 test('can add rectangle component to canvas', async ({ page }) => {
   await page.goto('');
   await page.getByText('Basic Shapes').click();
-  const component = page.getByAltText('Rectangle');
+  const component = page.getByAltText(/^Rectangle$/);
 
   const position = await getLocatorPosition(component);
   await dragAndDrop(page, position, {

src/common/components/mock-components/front-basic-shapes/postit-basic-shape.tsx

@@ -42,8 +42,22 @@ export const PostItShape = forwardRef<any, ShapeProps>((props, ref) => {
 
   const postItWidth = restrictedWidth;
   const postItHeight = restrictedHeight;
-  const tapeWidth = postItWidth * 0.4;
-  const tapeHeight = postItHeight * 0.18;
+
+  const fixedTapeWidth = 90;
+  const fixedTapeHeight = 40;
+
+  const minPostItWidthForFixedTape = 120;
+  const minPostItHeightForFixedTape = 120;
+
+  const tapeWidth =
+    postItWidth >= minPostItWidthForFixedTape
+      ? fixedTapeWidth
+      : (postItWidth / minPostItWidthForFixedTape) * fixedTapeWidth;
+
+  const tapeHeight =
+    postItHeight >= minPostItHeightForFixedTape
+      ? fixedTapeHeight
+      : (postItHeight / minPostItHeightForFixedTape) * fixedTapeHeight;
 
   const tapeX = (width - tapeWidth) / 2;
   const tapeY = 0;