Move responsive textarea rows behavior to muc-patternlab-vue

[coderabbitai]

Context

In PR #1713, a fix was implemented to address overlapping textarea inputs in the CustomerInfo component by adding responsive behavior that adjusts the number of rows based on viewport width.

Current Implementation

The fix is currently implemented in zmscitizenview/src/components/Appointment/CustomerInfo.vue with:

• A windowWidth ref that tracks window size via resize listener
• A textfieldRows computed property that returns 6 rows when viewport width ≤ 500px, otherwise 3 rows
• This value is bound to the rows property of MucTextArea components

Proposed Change

Move this responsive behavior directly into the MucTextArea component in the @muenchen/muc-patternlab-vue library so that:

1. All consumers benefit from responsive textarea behavior automatically
2. The logic is centralized in the component library
3. Consumer components don't need to implement this workaround

References

• Original PR: fix(ZMSKVR-719): overlapping textinput in zmscitizenview #1713
• Comment: fix(ZMSKVR-719): overlapping textinput in zmscitizenview #1713 (comment)
• Requested by: @ThomasAFink

[ThomasAFink]

@coderabbitai is this fixed yet?

[coderabbitai]

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Fetch issue `#1770` details
gh issue view 1770 --repo it-at-m/eappointment --json title,state,body,labels,assignees,comments,url

# Search for PRs that reference this issue
gh pr list --repo it-at-m/eappointment --search "1770" --state all --json number,title,state,url,mergedAt

Length of output: 152

---

🏁 Script executed:

#!/bin/bash
# Search for any closed PRs that may fix this issue
gh api "repos/it-at-m/eappointment/issues/1770/timeline" --paginate | jq '[.[] | select(.event == "cross-referenced" or .event == "referenced" or .event == "connected" or .event == "closing_commit") | {event: .event, source: .source, commit_id: .commit_id}]'

Length of output: 76

---

🏁 Script executed:

#!/bin/bash
# Fetch issue `#1770` details via unauthenticated GitHub REST API
curl -s "https://api.github.com/repos/it-at-m/eappointment/issues/1770" | jq '{title, state, body, labels: [.labels[].name], assignees: [.assignees[].login], url: .html_url, created_at, updated_at, closed_at}'

echo "---TIMELINE---"
# Fetch timeline to find linked/closing PRs
curl -s -H "Accept: application/vnd.github.mockingbird-preview+json" \
  "https://api.github.com/repos/it-at-m/eappointment/issues/1770/timeline?per_page=100" \
  | jq '[.[] | select(.event == "cross-referenced" or .event == "referenced" or .event == "connected" or .event == "closing_commit") | {event: .event, commit_id: .commit_id, source_type: .source.type, source_number: .source.issue.number, source_title: .source.issue.title, source_state: .source.issue.state, source_url: .source.issue.html_url}]'

Length of output: 131

---

🏁 Script executed:

#!/bin/bash
# Fetch raw response to debug
curl -s "https://api.github.com/repos/it-at-m/eappointment/issues/1770"

Length of output: 6201

---

@ThomasAFink — Not yet. Issue #1770 ("Move responsive textarea rows behavior to muc-patternlab-vue") is currently still open and has no linked closing PR.

To recap, the issue tracks moving the responsive rows behavior (currently in zmscitizenview/src/components/Appointment/CustomerInfo.vue as a textfieldRows computed property) upstream into the @muenchen/muc-patternlab-vue library's MucTextArea component, so all consumers benefit automatically. The workaround from PR #1713 is still in place in the consumer component.

Would you like me to help scope out the implementation, or is this something you're planning to pick up?

[ThomasAFink]

@coderabbitai is it fixed in the code?

[coderabbitai]

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Check if textfieldRows computed property still exists in CustomerInfo.vue
rg -n "textfieldRows\|textarea.*rows\|rows.*textarea\|MucTextArea" --type vue 2>/dev/null || \
rg -n "textfieldRows\|textarea.*rows\|rows.*textarea\|MucTextArea" -g "*.vue" -g "*.js" -g "*.ts"

echo "=== Check CustomerInfo.vue directly ==="
fd "CustomerInfo.vue" --exec cat {}

echo "=== Check for MucTextArea rows prop in patternlab ==="
rg -n "rows" -g "*.vue" -g "*.ts" | grep -i "textarea\|MucTextArea\|muc-text" | head -40

Length of output: 11566

---

@ThomasAFink — No, it is not fixed in the code. The workaround is still fully present in CustomerInfo.vue:

• inputLines1 / inputLines2 refs are still manually managed
• textfieldRows1 / textfieldRows2 computed properties still exist
• :rows="textfieldRows1" and :rows="textfieldRows2" are still passed explicitly to each <muc-text-area>
• countLines and handleInput are still imported from @/utils/textfieldRows and wired up via handleInput1 / handleInput2

The responsive rows behavior has not been moved upstream into the @muenchen/muc-patternlab-vue MucTextArea component yet. Issue #1770 remains open and unaddressed in the codebase.

[ThomasAFink]

I see how would you move it to https://github.com/it-at-m/muc-patternlab-vue @coderabbitai ?

[coderabbitai]

Coding Plan

Summary

• Contribute responsive rows behavior (6 rows ≤500px viewport, 3 rows otherwise) to the upstream MucTextArea component in the external it-at-m/muc-patternlab-vue library
• Design the feature so explicit rows prop overrides automatic behavior for backward compatibility
• After library release, update zmscitizenview dependency and remove the local textfieldRows.ts utility and related code from CustomerInfo.vue
• This centralizes the responsive logic in the component library, benefiting all consumers automatically

Design Choices

Design Choice 1: Which responsive behavior approach should be implemented in MucTextArea?

Options Considered:

1. Simple breakpoint approach: Return 6 rows when viewport ≤ 500px, otherwise 3 rows (as described in ticket)
2. DOM measurement approach: Use hidden div to measure actual text rendering and compute required rows dynamically (current implementation)
3. Hybrid approach: Use breakpoint for default/minimum rows, allow override via prop

Chosen Option: 1

Rationale: Aligns with ticket requirements and provides predictable behavior without complex DOM manipulation in the component library. The DOM measurement approach is more suited to application-specific needs and can remain as an optional consumer-side enhancement if needed.

Design Choice 2: Should the responsive behavior be opt-in or default?

Options Considered:

1. Default behavior: All MucTextArea components automatically use responsive rows
2. Opt-in via prop: Add a responsive boolean prop that enables the behavior
3. Opt-out via prop: Default to responsive, allow explicit rows prop to override

Chosen Option: 3

Rationale: Make responsive behavior the default, but when a consumer explicitly passes a rows prop, that value takes precedence. This ensures backward compatibility while providing the improvement automatically.

💡 User Tips

Regenerate the plan with different choices with @coderabbitai <feedback>.

Implementation Steps

Phase 1: Enhance MucTextArea in External Library

This phase involves contributing to the it-at-m/muc-patternlab-vue repository to add responsive rows behavior directly to the MucTextArea component.

Task 1: Locate and Understand MucTextArea Component

Identify the MucTextArea component definition in the it-at-m/muc-patternlab-vue repository and understand its current props interface and internal structure.

• Clone the it-at-m/muc-patternlab-vue repository from GitHub
• Locate the MucTextArea component source (likely in src/components/ or similar)
• Review existing props, particularly the rows prop handling
• Understand the component's template structure and how rows are applied to the underlying textarea element

Task 2: Implement Responsive Rows Logic

Add viewport-aware row calculation to the MucTextArea component that adjusts rows based on screen width.

• Add internal reactive state to track viewport width
• Implement resize event listener (with proper cleanup on unmount)
• Create computed property for responsive rows: return 6 when viewport ≤ 500px, otherwise 3
• Ensure explicit rows prop takes precedence over computed responsive value
• Apply the computed rows value to the native textarea element

Task 3: Add Component Tests

Ensure the new responsive behavior is properly tested.

• Add unit tests verifying default responsive behavior (6 rows at narrow viewport, 3 at wide)
• Add tests confirming explicit rows prop overrides responsive behavior
• Test resize listener cleanup to prevent memory leaks
• Follow existing test patterns in the library

Task 4: Update Documentation and Version

Prepare the library changes for release.

• Update component documentation to describe the new responsive behavior
• Document that explicit rows prop overrides automatic behavior
• Bump version number according to semver (minor version for new feature)
• Create pull request to it-at-m/muc-patternlab-vue repository

🤖 Prompt for AI agents

This phase adds responsive rows behavior to the `MucTextArea` component in the
`it-at-m/muc-patternlab-vue` external library. The goal is to make the textarea
automatically adjust its row count based on viewport width, while still allowing
consumers to override via an explicit `rows` prop.

- Clone/open the `it-at-m/muc-patternlab-vue` repository and locate the
`MucTextArea` component source file (likely under `src/components/`)
- Review the existing `rows` prop definition and how it is applied to the native
`<textarea>` element in the template
- Add internal reactive state to track the current `window.innerWidth`
- Register a `resize` event listener on `window` that updates the reactive width
state; clean it up in the `onUnmounted` lifecycle hook to prevent memory leaks
- Add a computed property for the effective rows value:
  - If a consumer explicitly passes a `rows` prop, that value takes precedence
- Otherwise, return `6` when `window.innerWidth ≤ 500`, and `3` for wider
viewports
- Bind the computed rows value to the native `<textarea>` element in the
component template
- Add unit tests covering:
- Default responsive behavior: 6 rows at narrow viewport (≤500px), 3 rows at
wide viewport
  - Explicit `rows` prop overrides the responsive behavior
  - Resize listener is cleaned up on unmount
  - Follow existing test patterns in the library
- Update component documentation to describe the new responsive behavior and
that the explicit `rows` prop overrides it
- Bump the version according to semver (minor version bump for a new feature)
- Open a pull request to the `it-at-m/muc-patternlab-vue` repository

Phase 2: Update Consumer Application

After the library publishes a new version with responsive MucTextArea, update zmscitizenview to use it and remove the local workaround.

Task 1: Update Library Dependency

Upgrade to the new version of muc-patternlab-vue that includes responsive textarea behavior.

• Update @muenchen/muc-patternlab-vue version in zmscitizenview/package.json
• Run dependency installation and verify no breaking changes
• Confirm MucTextArea components render correctly with new library version

Task 2: Simplify CustomerInfo Component

Remove the local responsive rows workaround from CustomerInfo.vue since the library now handles this.

• Remove inputLines1, inputLines2 refs from zmscitizenview/src/components/Appointment/CustomerInfo.vue
• Remove textfieldRows1, textfieldRows2 computed properties
• Remove handleInput1, handleInput2 event handlers
• Remove @input event bindings from MucTextArea elements
• Remove :rows prop bindings (or set to explicit value only if overriding default behavior is desired)
• Remove countLines and handleInput imports from @/utils/textfieldRows
• Remove the onMounted logic that seeds initial row counts

Task 3: Remove Utility File

Clean up the now-unused textarea rows utility.

• Delete zmscitizenview/src/utils/textfieldRows.ts if no longer used elsewhere
• Verify no other components import from this utility
• Update any barrel exports if the utils directory has an index file

Task 4: Update Tests

Adjust tests to reflect the simplified component behavior.

• Update zmscitizenview/tests/unit/Appointment/CustomerInfo.spec.ts to remove any tests related to dynamic rows calculation
• Verify existing tests pass with the simplified component
• The MucTextArea stub may need adjustment if tests were checking rows-related behavior

🤖 Prompt for AI agents

This phase updates the `zmscitizenview` consumer application to use the newly
released version of `@muenchen/muc-patternlab-vue` and removes all local
responsive-rows workaround code.

- Update the `@muenchen/muc-patternlab-vue` version in
`zmscitizenview/package.json` to the new release, then run dependency
installation and verify no breaking changes
- In `zmscitizenview/src/components/Appointment/CustomerInfo.vue`:
  - Remove the `inputLines1` and `inputLines2` refs
  - Remove the `textfieldRows1` and `textfieldRows2` computed properties
  - Remove the `handleInput1` and `handleInput2` event handlers
  - Remove `@input` event bindings from `MucTextArea` elements
- Remove `:rows` prop bindings (unless explicitly overriding the library default
is desired)
  - Remove `countLines` and `handleInput` imports from `@/utils/textfieldRows`
  - Remove the `onMounted` logic that seeded initial row counts
- Delete `zmscitizenview/src/utils/textfieldRows.ts` after verifying no other
components import from it; update any barrel exports in the utils directory if
present
- In `zmscitizenview/tests/unit/Appointment/CustomerInfo.spec.ts`:
  - Remove any tests related to dynamic rows calculation
  - Adjust the `MucTextArea` stub if it was checking rows-related behavior
  - Verify all remaining tests pass with the simplified component

Research

The zmscitizenview project is a Vue 3 web component that consumes the @muenchen/muc-patternlab-vue component library (v8.1.0) as an external npm dependency. The MucTextArea component is used in CustomerInfo.vue with dynamic row calculation provided by a local utility (src/utils/textfieldRows.ts). This utility uses DOM measurement to determine row count based on actual rendered text width, sampling window.innerWidth at call time (on mount and on input events) rather than using a persistent resize listener. The library source code lives in a separate GitHub repository (it-at-m/muc-patternlab-vue) and is not part of this monorepo.

---

🚀 Next Steps

🤖 All AI agent prompts combined

Task: 1

This phase adds responsive rows behavior to the `MucTextArea` component in the
`it-at-m/muc-patternlab-vue` external library. The goal is to make the textarea
automatically adjust its row count based on viewport width, while still allowing
consumers to override via an explicit `rows` prop.

- Clone/open the `it-at-m/muc-patternlab-vue` repository and locate the
`MucTextArea` component source file (likely under `src/components/`)
- Review the existing `rows` prop definition and how it is applied to the native
`<textarea>` element in the template
- Add internal reactive state to track the current `window.innerWidth`
- Register a `resize` event listener on `window` that updates the reactive width
state; clean it up in the `onUnmounted` lifecycle hook to prevent memory leaks
- Add a computed property for the effective rows value:
  - If a consumer explicitly passes a `rows` prop, that value takes precedence
- Otherwise, return `6` when `window.innerWidth ≤ 500`, and `3` for wider
viewports
- Bind the computed rows value to the native `<textarea>` element in the
component template
- Add unit tests covering:
- Default responsive behavior: 6 rows at narrow viewport (≤500px), 3 rows at
wide viewport
  - Explicit `rows` prop overrides the responsive behavior
  - Resize listener is cleaned up on unmount
  - Follow existing test patterns in the library
- Update component documentation to describe the new responsive behavior and
that the explicit `rows` prop overrides it
- Bump the version according to semver (minor version bump for a new feature)
- Open a pull request to the `it-at-m/muc-patternlab-vue` repository
===============================================================================

Task: 2

This phase updates the `zmscitizenview` consumer application to use the newly
released version of `@muenchen/muc-patternlab-vue` and removes all local
responsive-rows workaround code.

- Update the `@muenchen/muc-patternlab-vue` version in
`zmscitizenview/package.json` to the new release, then run dependency
installation and verify no breaking changes
- In `zmscitizenview/src/components/Appointment/CustomerInfo.vue`:
  - Remove the `inputLines1` and `inputLines2` refs
  - Remove the `textfieldRows1` and `textfieldRows2` computed properties
  - Remove the `handleInput1` and `handleInput2` event handlers
  - Remove `@input` event bindings from `MucTextArea` elements
- Remove `:rows` prop bindings (unless explicitly overriding the library default
is desired)
  - Remove `countLines` and `handleInput` imports from `@/utils/textfieldRows`
  - Remove the `onMounted` logic that seeded initial row counts
- Delete `zmscitizenview/src/utils/textfieldRows.ts` after verifying no other
components import from it; update any barrel exports in the utils directory if
present
- In `zmscitizenview/tests/unit/Appointment/CustomerInfo.spec.ts`:
  - Remove any tests related to dynamic rows calculation
  - Adjust the `MucTextArea` stub if it was checking rows-related behavior
  - Verify all remaining tests pass with the simplified component

💡 Iterate on the plan with: `@coderabbitai` <feedback>

Example Feedback
- `@coderabbitai` You can skip phase 3. Add a simple unit test case for phase 2.
- `@coderabbitai` For design choice 1 go ahead with option 3 and replan.

---

💬 Have feedback or questions? Drop into our discord!

[coderabbitai]

Coding Plan

Summary

• Contribute responsive rows behavior (6 rows ≤500px viewport, 3 rows otherwise) to the upstream MucTextArea component in the external it-at-m/muc-patternlab-vue library
• Design the feature so explicit rows prop overrides automatic behavior for backward compatibility
• After library release, update zmscitizenview dependency and remove the local textfieldRows.ts utility and related code from CustomerInfo.vue
• This centralizes the responsive logic in the component library, benefiting all consumers automatically

Design Choices

Design Choice 1: Which responsive behavior approach should be implemented in MucTextArea?

Options Considered:

1. Simple breakpoint approach: Return 6 rows when viewport ≤ 500px, otherwise 3 rows (as described in ticket)
2. DOM measurement approach: Use hidden div to measure actual text rendering and compute required rows dynamically (current implementation)
3. Hybrid approach: Use breakpoint for default/minimum rows, allow override via prop

Chosen Option: 1

Rationale: Aligns with ticket requirements and provides predictable behavior without complex DOM manipulation in the component library. The DOM measurement approach is more suited to application-specific needs and can remain as an optional consumer-side enhancement if needed.

Design Choice 2: Should the responsive behavior be opt-in or default?

Options Considered:

1. Default behavior: All MucTextArea components automatically use responsive rows
2. Opt-in via prop: Add a responsive boolean prop that enables the behavior
3. Opt-out via prop: Default to responsive, allow explicit rows prop to override

Chosen Option: 3

Rationale: Make responsive behavior the default, but when a consumer explicitly passes a rows prop, that value takes precedence. This ensures backward compatibility while providing the improvement automatically.

💡 User Tips

Regenerate the plan with different choices with @coderabbitai <feedback>.

Implementation Steps

Phase 1: Enhance MucTextArea in External Library

This phase involves contributing to the it-at-m/muc-patternlab-vue repository to add responsive rows behavior directly to the MucTextArea component.

Task 1: Fork Repository and Locate MucTextArea Component

Set up the development environment for contributing to the external library.

• Fork the it-at-m/muc-patternlab-vue repository on GitHub
• Clone the fork and create a feature branch (e.g., feature/responsive-textarea-rows)
• Open src/components/Form/MucTextArea.vue — this is the target component
• Review the existing props destructuring: const { id, rows = 3, required = false, ... } = defineProps<...>()
• Note how rows is currently bound directly to the native textarea: :rows="rows"
• Review src/components/Form/MucTextArea.stories.ts for Storybook documentation patterns

Task 2: Implement Responsive Rows Logic

Add viewport-aware row calculation to the MucTextArea component using Vue Composition API patterns.

• Add imports: import { ref, computed, onMounted, onBeforeUnmount } from "vue"
• Create a windowWidth ref initialized to window.innerWidth (with SSR guard: typeof window !== 'undefined' ? window.innerWidth : 1024)
• Implement updateWidth function that sets windowWidth.value = window.innerWidth
• In onMounted, add resize listener: window.addEventListener('resize', updateWidth)
• In onBeforeUnmount, remove listener: window.removeEventListener('resize', updateWidth)
• Create computedRows computed property: return the explicit rows prop if provided by consumer, otherwise return windowWidth.value <= 500 ? 6 : 3
• Detect if rows prop was explicitly passed using const props = defineProps<...>() and checking if props.rows !== undefined
• Update template binding from :rows="rows" to :rows="computedRows"

Task 3: Add Component Tests

Create unit tests for the new responsive behavior following the library's Vitest setup.

• Create test file at src/components/Form/MucTextArea.spec.ts (library uses Vitest with JSDOM)
• Import mount from @vue/test-utils, describe, it, expect, vi, beforeEach, afterEach from vitest
• Test default responsive behavior: mock window.innerWidth = 400, mount component, assert textarea has 6 rows
• Test wide viewport: mock window.innerWidth = 800, mount component, assert textarea has 3 rows
• Test explicit prop override: mount with :rows="10", assert textarea has 10 rows regardless of viewport
• Test resize behavior: mount, change window.innerWidth, dispatch resize event, assert rows update
• Test cleanup: mount, unmount, verify no lingering event listeners (spy on removeEventListener)

Task 4: Update Documentation and Submit PR

Prepare the library changes for release following the repository's contribution workflow.

• Update MucTextArea.stories.ts to document the responsive behavior in the component description
• Add a story variant demonstrating the responsive rows behavior at different viewports
• Document in story that explicit rows prop overrides automatic behavior
• Use gitmoji commit convention: :sparkles: Add responsive rows behavior to MucTextArea (sparkles = minor feature)
• Push feature branch and open PR to it-at-m/muc-patternlab-vue targeting the appropriate branch (likely main or beta)
• Reference the original eappointment issue/PR in the PR description for context
• Note: semantic-release will auto-bump minor version on merge based on the :sparkles: commit

🤖 Prompt for AI agents

This phase adds responsive rows behavior to the `MucTextArea` component in the
`it-at-m/muc-patternlab-vue` external library. The goal is to make the textarea
automatically adjust its row count based on viewport width, while still allowing
consumers to override via an explicit `rows` prop.

- Fork the `it-at-m/muc-patternlab-vue` repository on GitHub, clone the fork,
and create a feature branch (e.g., `feature/responsive-textarea-rows`)
- Open `src/components/Form/MucTextArea.vue` and review the existing props
destructuring (`const { id, rows = 3, required = false, ... } =
defineProps<...>()`) and how `rows` is bound to the native textarea
(`:rows="rows"`); also review `src/components/Form/MucTextArea.stories.ts` for
documentation patterns
- Add imports: `import { ref, computed, onMounted, onBeforeUnmount } from "vue"`
- Create a `windowWidth` ref initialized with an SSR guard: `typeof window !==
'undefined' ? window.innerWidth : 1024`
- Implement an `updateWidth` function that sets `windowWidth.value =
window.innerWidth`
- In `onMounted`, register the resize listener:
`window.addEventListener('resize', updateWidth)`
- In `onBeforeUnmount`, remove it: `window.removeEventListener('resize',
updateWidth)`
- Add a `computedRows` computed property:
- Use `const props = defineProps<...>()` to detect if `rows` was explicitly
passed (check `props.rows !== undefined`)
- If explicitly provided, return `props.rows`; otherwise return
`windowWidth.value <= 500 ? 6 : 3`
- Update the template binding from `:rows="rows"` to `:rows="computedRows"`
- Create test file at `src/components/Form/MucTextArea.spec.ts` using Vitest
with JSDOM:
  - Import `mount` from `@vue/test-utils` and test utilities from `vitest`
- Test default responsive behavior: mock `window.innerWidth = 400`, mount
component, assert textarea has 6 rows
  - Test wide viewport: mock `window.innerWidth = 800`, mount, assert 3 rows
- Test explicit prop override: mount with `:rows="10"`, assert 10 rows
regardless of viewport
- Test resize behavior: mount, change `window.innerWidth`, dispatch resize
event, assert rows update
- Test cleanup: mount, unmount, verify `removeEventListener` was called (spy on
it)
- Update `MucTextArea.stories.ts` to document the responsive behavior, add a
story variant for different viewports, and note that explicit `rows` prop
overrides automatic behavior
- Commit using gitmoji convention: `:sparkles: Add responsive rows behavior to
MucTextArea`
- Push the feature branch and open a PR to the appropriate target branch (`main`
or `beta`), referencing the original eappointment issue/PR; semantic-release
will auto-bump the minor version on merge

Phase 2: Update Consumer Application

After the library publishes a new version with responsive MucTextArea, update zmscitizenview to use it and remove the local workaround.

Task 1: Update Library Dependency

Upgrade to the new version of muc-patternlab-vue that includes responsive textarea behavior.

• Update @muenchen/muc-patternlab-vue version in zmscitizenview/package.json
• Run dependency installation and verify no breaking changes
• Confirm MucTextArea components render correctly with new library version

Task 2: Simplify CustomerInfo Component

Remove the local responsive rows workaround from CustomerInfo.vue since the library now handles this.

• Remove inputLines1, inputLines2 refs from zmscitizenview/src/components/Appointment/CustomerInfo.vue
• Remove textfieldRows1, textfieldRows2 computed properties
• Remove handleInput1, handleInput2 event handlers
• Remove @input event bindings from MucTextArea elements
• Remove :rows prop bindings (or set to explicit value only if overriding default behavior is desired)
• Remove countLines and handleInput imports from @/utils/textfieldRows
• Remove the onMounted logic that seeds initial row counts

Task 3: Remove Utility File

Clean up the now-unused textarea rows utility.

• Delete zmscitizenview/src/utils/textfieldRows.ts if no longer used elsewhere
• Verify no other components import from this utility
• Update any barrel exports if the utils directory has an index file

Task 4: Update Tests

Adjust tests to reflect the simplified component behavior.

• Update zmscitizenview/tests/unit/Appointment/CustomerInfo.spec.ts to remove any tests related to dynamic rows calculation
• Verify existing tests pass with the simplified component
• The MucTextArea stub may need adjustment if tests were checking rows-related behavior

🤖 Prompt for AI agents

This phase updates the `zmscitizenview` consumer application to use the newly
released version of `@muenchen/muc-patternlab-vue` and removes all local
responsive-rows workaround code.

- Update the `@muenchen/muc-patternlab-vue` version in
`zmscitizenview/package.json` to the new release, then run dependency
installation and verify no breaking changes
- In `zmscitizenview/src/components/Appointment/CustomerInfo.vue`:
  - Remove the `inputLines1` and `inputLines2` refs
  - Remove the `textfieldRows1` and `textfieldRows2` computed properties
  - Remove the `handleInput1` and `handleInput2` event handlers
  - Remove `@input` event bindings from `MucTextArea` elements
- Remove `:rows` prop bindings (unless explicitly overriding the library default
is desired)
  - Remove `countLines` and `handleInput` imports from `@/utils/textfieldRows`
  - Remove the `onMounted` logic that seeded initial row counts
- Delete `zmscitizenview/src/utils/textfieldRows.ts` after verifying no other
components import from it; update any barrel exports in the utils directory if
present
- In `zmscitizenview/tests/unit/Appointment/CustomerInfo.spec.ts`:
  - Remove any tests related to dynamic rows calculation
  - Adjust the `MucTextArea` stub if it was checking rows-related behavior
  - Verify all remaining tests pass with the simplified component

Research

The zmscitizenview project is a Vue 3 web component that consumes the @muenchen/muc-patternlab-vue component library (v8.1.0) as an external npm dependency. The MucTextArea component is used in CustomerInfo.vue with dynamic row calculation provided by a local utility (src/utils/textfieldRows.ts). This utility uses DOM measurement to determine row count based on actual rendered text width, sampling window.innerWidth at call time (on mount and on input events) rather than using a persistent resize listener. The library source code lives in a separate GitHub repository (it-at-m/muc-patternlab-vue) and is not part of this monorepo. The MucTextArea component is located at src/components/Form/MucTextArea.vue in that repository, uses <script setup lang="ts">, and currently accepts a rows?: number prop with a default of 3.

---

🚀 Next Steps

🤖 All AI agent prompts combined

Task: 1

This phase adds responsive rows behavior to the `MucTextArea` component in the
`it-at-m/muc-patternlab-vue` external library. The goal is to make the textarea
automatically adjust its row count based on viewport width, while still allowing
consumers to override via an explicit `rows` prop.

- Fork the `it-at-m/muc-patternlab-vue` repository on GitHub, clone the fork,
and create a feature branch (e.g., `feature/responsive-textarea-rows`)
- Open `src/components/Form/MucTextArea.vue` and review the existing props
destructuring (`const { id, rows = 3, required = false, ... } =
defineProps<...>()`) and how `rows` is bound to the native textarea
(`:rows="rows"`); also review `src/components/Form/MucTextArea.stories.ts` for
documentation patterns
- Add imports: `import { ref, computed, onMounted, onBeforeUnmount } from "vue"`
- Create a `windowWidth` ref initialized with an SSR guard: `typeof window !==
'undefined' ? window.innerWidth : 1024`
- Implement an `updateWidth` function that sets `windowWidth.value =
window.innerWidth`
- In `onMounted`, register the resize listener:
`window.addEventListener('resize', updateWidth)`
- In `onBeforeUnmount`, remove it: `window.removeEventListener('resize',
updateWidth)`
- Add a `computedRows` computed property:
- Use `const props = defineProps<...>()` to detect if `rows` was explicitly
passed (check `props.rows !== undefined`)
- If explicitly provided, return `props.rows`; otherwise return
`windowWidth.value <= 500 ? 6 : 3`
- Update the template binding from `:rows="rows"` to `:rows="computedRows"`
- Create test file at `src/components/Form/MucTextArea.spec.ts` using Vitest
with JSDOM:
  - Import `mount` from `@vue/test-utils` and test utilities from `vitest`
- Test default responsive behavior: mock `window.innerWidth = 400`, mount
component, assert textarea has 6 rows
  - Test wide viewport: mock `window.innerWidth = 800`, mount, assert 3 rows
- Test explicit prop override: mount with `:rows="10"`, assert 10 rows
regardless of viewport
- Test resize behavior: mount, change `window.innerWidth`, dispatch resize
event, assert rows update
- Test cleanup: mount, unmount, verify `removeEventListener` was called (spy on
it)
- Update `MucTextArea.stories.ts` to document the responsive behavior, add a
story variant for different viewports, and note that explicit `rows` prop
overrides automatic behavior
- Commit using gitmoji convention: `:sparkles: Add responsive rows behavior to
MucTextArea`
- Push the feature branch and open a PR to the appropriate target branch (`main`
or `beta`), referencing the original eappointment issue/PR; semantic-release
will auto-bump the minor version on merge
===============================================================================

Task: 2

This phase updates the `zmscitizenview` consumer application to use the newly
released version of `@muenchen/muc-patternlab-vue` and removes all local
responsive-rows workaround code.

- Update the `@muenchen/muc-patternlab-vue` version in
`zmscitizenview/package.json` to the new release, then run dependency
installation and verify no breaking changes
- In `zmscitizenview/src/components/Appointment/CustomerInfo.vue`:
  - Remove the `inputLines1` and `inputLines2` refs
  - Remove the `textfieldRows1` and `textfieldRows2` computed properties
  - Remove the `handleInput1` and `handleInput2` event handlers
  - Remove `@input` event bindings from `MucTextArea` elements
- Remove `:rows` prop bindings (unless explicitly overriding the library default
is desired)
  - Remove `countLines` and `handleInput` imports from `@/utils/textfieldRows`
  - Remove the `onMounted` logic that seeded initial row counts
- Delete `zmscitizenview/src/utils/textfieldRows.ts` after verifying no other
components import from it; update any barrel exports in the utils directory if
present
- In `zmscitizenview/tests/unit/Appointment/CustomerInfo.spec.ts`:
  - Remove any tests related to dynamic rows calculation
  - Adjust the `MucTextArea` stub if it was checking rows-related behavior
  - Verify all remaining tests pass with the simplified component

💡 Iterate on the plan with: `@coderabbitai` <feedback>

Example Feedback
- `@coderabbitai` You can skip phase 3. Add a simple unit test case for phase 2.
- `@coderabbitai` For design choice 1 go ahead with option 3 and replan.

---

💬 Have feedback or questions? Drop into our discord!