i want image list to scroll this is my code "<template>
  <v-app>
    <v-container fluid>
      <v-row justify="center" class="py-5">
        <!-- Sidebar for Images and File Inputs -->
        <v-col cols="3">
          <!-- Image Upload with Tooltip -->
          <v-file-input label="Upload Images" accept="image/*" outlined @change="onImageUpload" multiple
            id="loadImageInputFile" prepend-icon="mdi-upload" hint="Select multiple images for annotation"
            persistent-hint style="display: none;"></v-file-input>

          <v-btn color="warning" elevation="2" dark @click="clickOnLoadImagesFileInput" class="mb-3"
            aria-label="Load Images">
            Load Images ({{ images.length }})
          </v-btn>

          <!-- List of Images with better spacing and highlighting -->
          <v-list-item v-for="(img, index) in images" :key="index" @click="selectImage(index)"
            :class="{ 'active': selectedImageIndex === index, 'v-list-item--active': selectedImageIndex === index }"
            style="cursor: pointer;" :aria-label="'Select image ' + (index + 1)">
            <template v-slot:append>
              <!-- Add a delete button for each image -->
              <v-btn icon @click.stop="removeImage(index)" color="red" variant="tonal" density="comfortable"
                aria-label="Delete image">
                <v-icon>mdi-delete</v-icon>
              </v-btn>
            </template>
            <v-list-item-content>
              <v-list-item-title>Image {{ index + 1 }} : {{ img.rectangles.length }}</v-list-item-title>
            </v-list-item-content>

          </v-list-item>
        </v-col>

        <!-- Main Content for Canvas and Tools -->
        <v-col cols="9">
          <v-row>
            <v-col cols="8">
              <v-btn-group>
                <!-- Export Button positioned logically -->
                <v-btn color="success" elevation="2" @click="clickOnImportAnnotation" class="mb-3"
                  aria-label="Import annotated data with images">
                  Import Annotations
                </v-btn>
                <v-btn color="primary" elevation="2" @click="exportToJson" class="mb-3"
                  aria-label="Export annotated data with images">
                  Export Annotations
                </v-btn>
              </v-btn-group>
              <!-- Import JSON with feedback -->
              <v-file-input style="display: none;" id="importAnnotaionInputFile" label="Import Annotated Data"
                accept=".json" outlined @change="importJsonData" prepend-icon="mdi-folder-open"
                hint="Import existing annotations in JSON format" persistent-hint></v-file-input>

              <!-- Canvas for Drawing -->
              <v-card elevation="1">
                <v-card-text class="pa-4">
                  <canvas ref="canvas" :width="canvasWidth" :height="canvasHeight" @wheel.prevent="onMouseWheel"
                    @mousedown="onMouseDown" @mouseup="onMouseUp" @mousemove="onMouseMove"
                    style="border: 1px solid #ddd;"></canvas>
                </v-card-text>
              </v-card>

              <!-- Labels with descriptive badge -->
              <v-chip-group v-if="labels.length" mandatory class="mt-3">
                <v-chip label v-for="(label, index) in labels" :key="label.name" @click="selectLabel(label)"
                  :color="selectedLabel === label.name ? label.color : ''" class="ma-2" variant="tonal">
                  <v-badge :color="label.color" :content="index + 1" inline></v-badge>
                  <v-label class="ml-2">{{ label.name }}</v-label>
                </v-chip>
              </v-chip-group>
            </v-col>

            <!-- Rectangle List and Import -->
            <v-col cols="4">


              <!-- Rectangle List with emphasis on active selection -->
              <v-list v-if="rectangles.length" class="mt-5" tile>
                <v-subheader class="font-weight-medium">Rectangles</v-subheader>
                <v-list-item v-for="(rect, index) in rectangles" :key="index"
                  @click="toggleRectangleSelection(index, $event)"
                  :class="{ 'active': selectedRectangles.includes(rect), 'v-list-item--active': selectedRectangles.includes(rect) }"
                  style="cursor: pointer;">
                  <template v-slot:prepend>
                    <v-icon :style="{ color: rect.color }">mdi-circle</v-icon>
                  </template>
                  <template v-slot:append>
                    <v-btn icon @click.stop="removeRectangle(index)" color="red" variant="tonal" density="comfortable"
                      aria-label="Remove rectangle">
                      <v-icon>mdi-delete</v-icon>
                    </v-btn>
                  </template>
                  <v-list-item-content>
                    <v-list-item-title>{{ rect.label }}</v-list-item-title>
                    <v-list-item-subtitle>
                      [x: {{ rect.x.toFixed(3) }}, y: {{ rect.y.toFixed(3) }}, w: {{ rect.width.toFixed(3) }}, h:
                      {{ rect.height.toFixed(3) }}]
                    </v-list-item-subtitle>
                  </v-list-item-content>
                </v-list-item>
              </v-list>
            </v-col>
          </v-row>

          <!-- Export to ZIP Button -->
          <v-btn color="success" elevation="2" dark @click="exportToZip" class="my-3" aria-label="Yolo DataSet">
            Export DataSet
          </v-btn>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</template>"