Is there a way to adjust the width of the pre tag in order to avoid affecting the q-card when resizing the browser window? I am trying to create a q-card that can display code similar to what you see in ChatGPT. However, the q-card's size is not responsive to the pre and code tags.
https://i.sstatic.net/rVrdUikZ.png
Reproduction URL
https://codepen.io/timamus/pen/eYaNPQz
Code
<div id="q-app">
<div class="q-ma-md">
<q-layout view="lHh Lpr lFf">
<q-page-container>
<q-page class="flex flex-center">
<q-list>
<q-item class="justify-center">
<q-item-section class="left-sec">
</q-item-section>
<q-item-section class="custom-message">
<q-card flat bordered class="card-code">
<q-card-section style="height: 100%; width: 100%">
<pre>
<code>
{{ newMessage }}
</code>
</pre>
<!-- <q-item-label> {{ newMessage }} <q-item-label> -->
</q-card-section>
</q-card>
</q-item-section>
<q-item-section class="right-sec">
</q-item-section>
<q-item>
</q-list>
</q-page>
<q-page-container>
</q-layout>
</div>
<div class="q-ma-md">
Running Quasar v{{ $q.version }}
</div>
</div>