internal: Update URL styles, readonly state, and viewport tag styling (#32109)

* Add focus and active states for AUT URL input styling

Co-authored-by: jennifer <[email protected]>

* Add actual styles based on Figma

* Update vue-tag and add dark tag

* update styles and placeholder

* remove old studioUrlPrompt

* Update tests and logic for disabled input

* removed some unused functions/helper text no longer used

* add readonly attr

* only use readonly

* update CT test to match new behavior

---------

Co-authored-by: Cursor Agent <[email protected]>

Author: jennifer-shehane

packages/app/cypress/e2e/cypress-in-cypress-component.cy.ts

@@ -19,7 +19,7 @@ describe('Cypress In Cypress CT', { viewportWidth: 1500, defaultCommandTimeout:
       cy.waitForSpecToFinish()
       cy.get('[data-model-state="passed"]').should('contain', 'renders the test component')
 
-      cy.findByTestId('aut-url-input').should('be.disabled')
+      cy.findByTestId('aut-url-input').should('have.prop', 'readOnly', true)
       cy.findByTestId('select-browser').click()
 
       cy.contains('Canary').should('be.visible')

packages/app/cypress/e2e/studio/studio-cloud.cy.ts

@@ -113,8 +113,6 @@ describe('Studio Cloud', () => {
 
     cy.contains('New test')
 
-    cy.findByTestId('studio-url-prompt').should('not.exist')
-
     cy.percySnapshot()
   })
 

packages/app/package.json

@@ -28,7 +28,7 @@
     "@cypress-design/vue-spinner": "^1.0.0",
     "@cypress-design/vue-statusicon": "^1.0.0",
     "@cypress-design/vue-tabs": "^1.2.2",
-    "@cypress-design/vue-tag": "^1.0.1",
+    "@cypress-design/vue-tag": "^1.1.0",
     "@cypress/mount-utils": "0.0.0-development",
     "@faker-js/faker": "9.6.0",
     "@graphql-typed-document-node/core": "^3.1.0",

packages/app/src/runner/SpecRunnerDropdown.vue

@@ -1,11 +1,11 @@
 <template>
   <Popover
     :key="`${props.disabled}`"
-    class="rounded-[50px] h-[30px] mx-[6px] py-[2px] relative"
+    class="rounded-[50px] h-[24px] mx-[6px] py-[2px] relative"
     #="{ open, close }"
   >
     <PopoverButton
-      class="border rounded-[50px] self-center h-full grow px-[5px] group outline-none hover:bg-gray-800"
+      class="border rounded-[50px] self-center h-[24px] grow px-[5px] group outline-none hover:bg-gray-800"
       :class="{
         'opacity-50 cursor-auto': props.disabled,
         'rounded-[5px] border-[1px] border-indigo-100': !props.minimal,