adding hover behavior for images (#4735)

this pr adds a 'hover over images to expand' behavior. the following
changes were made to the original code:

## original lightbox src component: 
- original lightbox component handled the display of images with
alignment and collapsing features.
- used props for customization but did not have any interactive behavior
like hover effects or handling of scrolling events.

## updates to lightbox src component:
- added state variables : `isHovered`, `expandImage`, and `isScrolling`.
- `isHovered`: tracks if the mouse is hovering over image.
- `expandImage`: identifies if the image should expand.
- `isScrolling`: helps indicate whether page is currently being
scrolled. (to avoid pop ups when a user is reading)
- implemented a hover effect that expands the image
(`setExpandImage(true)` after a delay (300 milliseconds), but only if
the page is not being scrolled (!isScrolling).
- added a `handleScroll` function to update the `isScrolling` state when
the user scrolls. This function also cancels the image expansion
(`setExpandImage(false)`) and resets `isScrolling` after a delay.
- added event listeners for mouse enter (`onMouseEnter`) and mouse leave
(`onMouseLeave`) to control the hover state (`setIsHovered`).
- attached a scroll event listener to the window in a `useEffect` hook
to trigger `handleScroll`
- modified the `handleMouseEnter` to include a delay (matching the
scroll delay) before setting `isHovered` to true. This ensures that
hover effects are not activated immediately after scrolling stops.
- adjusted the component structure and styling to accommodate the new
hover and scroll behaviors. this means the image now scales (transform:
'scale(1.2)') with a smooth transition (transition: 'transform 0.5s
ease') when hovered, and the zIndex is increased to '9999' during
expansion.
- added a default width to `80%` to all images (using lightbox src
component) to ensure the scale was consistent across images and improve
accessibility. adding widths also helps with page load and SEO.

## images
- also adjusted widths for images that a large width attribute assigned.
this is to ensure it scaled correctly without affecting the user UX.

Author: mirnawong1

website/blog/2023-04-18-building-a-kimball-dimensional-model-with-dbt.md

@@ -185,7 +185,7 @@ Now that you’ve set up the dbt project, database, and have taken a peek at the
 
 Identifying the business process is done in collaboration with the business user. The business user has context around the business objectives and business processes, and can provide you with that information. 
 
-<Lightbox src="/img/blog/2023-04-18-building-a-kimball-dimensional-model-with-dbt/conversation.png" width="65%" title="Conversation between business user and analytics engineer"/>
+<Lightbox src="/img/blog/2023-04-18-building-a-kimball-dimensional-model-with-dbt/conversation.png" title="Conversation between business user and analytics engineer"/>
 
 Upon speaking with the CEO of AdventureWorks, you learn the following information: 
 

website/docs/docs/cloud/dbt-cloud-ide/ide-user-interface.md

@@ -10,7 +10,7 @@ The [dbt Cloud IDE](/docs/cloud/dbt-cloud-ide/develop-in-the-cloud) is a tool fo
 
 This page offers comprehensive definitions and terminology of user interface elements, allowing you to navigate the IDE landscape with ease.
 
-<Lightbox src="/img/docs/dbt-cloud/cloud-ide/ide-basic-layout.jpg" width="100%" title="The Cloud IDE layout includes version control on the upper left, files/folders on the left, editor on the right an command/console at the bottom"/>
+<Lightbox src="/img/docs/dbt-cloud/cloud-ide/ide-basic-layout.jpg" width="90%" title="The Cloud IDE layout includes version control on the upper left, files/folders on the left, editor on the right an command/console at the bottom"/>
 
 ## Basic layout
 
@@ -36,7 +36,7 @@ The IDE streamlines your workflow, and features a popular user interface layout
       * Added (A) — The IDE detects added files
       * Deleted (D) — The IDE detects deleted files.
 
-<Lightbox src="/img/docs/dbt-cloud/cloud-ide/ide-command-bar.jpg" width="120%" title="Use the Command bar to write dbt commands, toggle 'Defer', and view the current IDE status"/>
+<Lightbox src="/img/docs/dbt-cloud/cloud-ide/ide-command-bar.jpg" width="90%" title="Use the Command bar to write dbt commands, toggle 'Defer', and view the current IDE status"/>
 
 5. **Command bar &mdash;**  The Command bar, located in the lower left of the IDE, is used to invoke [dbt commands](/reference/dbt-commands). When a command is invoked, the associated logs are shown in the Invocation History Drawer.
 
@@ -49,7 +49,7 @@ The IDE streamlines your workflow, and features a popular user interface layout
 
 The IDE features some delightful tools and layouts to make it easier for you to write dbt code and collaborate with teammates. 
 
-<Lightbox src="/img/docs/dbt-cloud/cloud-ide/ide-editing.jpg" width="100%" title="Use the file editor, version control section, and save button during your development workflow"/>
+<Lightbox src="/img/docs/dbt-cloud/cloud-ide/ide-editing.jpg" width="90%" title="Use the file editor, version control section, and save button during your development workflow"/>
 
 1. **File Editor &mdash;** The File Editor is where users edit code. Tabs break out the region for each opened file, and unsaved files are marked with a blue dot icon in the tab view. 
 
@@ -66,24 +66,24 @@ The IDE features some delightful tools and layouts to make it easier for you to
 ## Additional editing features
 
 - **Minimap &mdash;** A Minimap (code outline) gives you a high-level overview of your source code, which is useful for quick navigation and code understanding. A file's minimap is displayed on the upper-right side of the editor. To quickly jump to different sections of your file, click the shaded area.
-<Lightbox src="/img/docs/dbt-cloud/cloud-ide/ide-minimap.jpg" width="100%" title="Use the Minimap for quick navigation and code understanding"/>
+<Lightbox src="/img/docs/dbt-cloud/cloud-ide/ide-minimap.jpg" width="90%" title="Use the Minimap for quick navigation and code understanding"/>
 
 - **dbt Editor Command Palette &mdash;** The dbt Editor Command Palette displays text editing actions and their associated keyboard shortcuts. This can be accessed by pressing `F1` or right-clicking in the text editing area and selecting Command Palette.
-<Lightbox src="/img/docs/dbt-cloud/cloud-ide/ide-editor-command-palette-with-save.jpg" width="100%" title="Click F1 to access the dbt Editor Command Palette menu for editor shortcuts"/>
+<Lightbox src="/img/docs/dbt-cloud/cloud-ide/ide-editor-command-palette-with-save.jpg" width="90%" title="Click F1 to access the dbt Editor Command Palette menu for editor shortcuts"/>
 
 - **Git Diff View &mdash;** Clicking on a file in the **Changes** section of the **Version Control Menu** will open the changed file with Git Diff view. The editor will show the previous version on the left and the in-line changes made on the right.
-<Lightbox src="/img/docs/dbt-cloud/cloud-ide/ide-git-diff-view-with-save.jpg" width="100%" title="The Git Diff View displays the previous version on the left and the changes made on the right of the Editor"/>
+<Lightbox src="/img/docs/dbt-cloud/cloud-ide/ide-git-diff-view-with-save.jpg" width="90%" title="The Git Diff View displays the previous version on the left and the changes made on the right of the Editor"/>
 
 - **Markdown Preview console tab &mdash;** The Markdown Preview console tab shows a preview of your .md file's markdown code in your repository and updates it automatically as you edit your code.
-<Lightbox src="/img/docs/dbt-cloud/cloud-ide/ide-markdown-with-save.jpg" width="100%" title="The Markdown Preview console tab renders markdown code below the Editor tab."/>
+<Lightbox src="/img/docs/dbt-cloud/cloud-ide/ide-markdown-with-save.jpg" width="90%" title="The Markdown Preview console tab renders markdown code below the Editor tab."/>
 
 - **CSV Preview console tab &mdash;** The CSV Preview console tab displays the data from your CSV file in a table, which updates automatically as you edit the file in your seed directory.
-<Lightbox src="/img/docs/dbt-cloud/cloud-ide/ide-csv.jpg" width="100%" title="View csv code in the CSV Preview console tab below the Editor tab."/>
+<Lightbox src="/img/docs/dbt-cloud/cloud-ide/ide-csv.jpg" width="90%" title="View csv code in the CSV Preview console tab below the Editor tab."/>
 
 ## Console section
 
 The console section, located below the File editor, includes various console tabs and buttons to help you with tasks such as previewing, compiling, building, and viewing the <Term id="dag" />. Refer to the following sub-bullets for more details on the console tabs and buttons.
-<Lightbox src="/img/docs/dbt-cloud/cloud-ide/ide-console-overview.jpg" width="100%" title="The Console section is located below the File editor and has various tabs and buttons to help execute tasks"/>
+<Lightbox src="/img/docs/dbt-cloud/cloud-ide/ide-console-overview.jpg" width="90%" title="The Console section is located below the File editor and has various tabs and buttons to help execute tasks"/>
 
 1. **Preview button &mdash;** When you click on the Preview button, it runs the SQL in the active file editor regardless of whether you have saved it or not and sends the results to the **Results** console tab. You can preview a selected portion of saved or unsaved code by highlighting it and then clicking the **Preview** button.
 
@@ -107,17 +107,17 @@ Starting from dbt v1.6 or higher, when you save changes to a model, you can comp
 3. **Format button &mdash;** The editor has a **Format** button that can reformat the contents of your files. For SQL files, it uses either `sqlfmt` or `sqlfluff`, and for Python files, it uses `black`.
 
 5. **Results tab &mdash;** The Results console tab displays the most recent Preview results in tabular format. 
-<Lightbox src="/img/docs/dbt-cloud/cloud-ide/results-console-tab.jpg" width="100%" title="Preview results show up in the Results console tab"/>
+<Lightbox src="/img/docs/dbt-cloud/cloud-ide/results-console-tab.jpg" width="90%" title="Preview results show up in the Results console tab"/>
 
 6. **Compiled Code tab &mdash;** The Compile button triggers a compile invocation that generates compiled code, which is displayed in the Compiled Code tab.
-<Lightbox src="/img/docs/dbt-cloud/cloud-ide/compiled-code-console-tab.jpg" width="100%" title="Compile results show up in the Compiled Code tab"/>
+<Lightbox src="/img/docs/dbt-cloud/cloud-ide/compiled-code-console-tab.jpg" width="90%" title="Compile results show up in the Compiled Code tab"/>
 
 7. **Lineage tab &mdash;** The Lineage tab in the File Editor displays the active model's lineage or  <Term id="dag" />. By default, it shows two degrees of lineage in both directions (`2+model_name+2`), however, you can change it to +model+ (full DAG).
     - Double-click a node in the DAG to open that file in a new tab
     - Expand or shrink the DAG using node selection syntax.
     - Note, the `--exclude` flag isn't supported.
 
-<Lightbox src="/img/docs/dbt-cloud/cloud-ide/lineage-console-tab.jpg" width="100%" title="View resource lineage in the Lineage tab"/>
+<Lightbox src="/img/docs/dbt-cloud/cloud-ide/lineage-console-tab.jpg" width="90%" title="View resource lineage in the Lineage tab"/>
 
 ## Invocation history
 
@@ -128,7 +128,7 @@ You can open the drawer in multiple ways:
 - Typing a dbt command and pressing enter
 - Or pressing Control-backtick (or Ctrl + `)
 
-<Lightbox src="/img/docs/dbt-cloud/cloud-ide/ide-inv-history-drawer.jpg" width="100%" title="The Invocation History Drawer returns a log and detail of all your dbt Cloud invocations."/>
+<Lightbox src="/img/docs/dbt-cloud/cloud-ide/ide-inv-history-drawer.jpg" width="90%" title="The Invocation History Drawer returns a log and detail of all your dbt Cloud invocations."/>
 
 1. **Invocation History list &mdash;** The left-hand panel of the Invocation History Drawer displays a list of previous invocations in the IDE, including the command, branch name, command status, and elapsed time.
 
@@ -138,7 +138,7 @@ You can open the drawer in multiple ways:
 
 4. **Command Control button &mdash;** Use the Command Control button, located on the right side, to control your invocation and cancel or rerun a selected run.
 
-<Lightbox src="/img/docs/dbt-cloud/cloud-ide/ide-results.jpg" width="100%" title="The Invocation History list displays a list of previous invocations in the IDE"/>
+<Lightbox src="/img/docs/dbt-cloud/cloud-ide/ide-results.jpg" width="90%" title="The Invocation History list displays a list of previous invocations in the IDE"/>
 
 5. **Node Summary tab &mdash;** Clicking on the Results Status Tabs will filter the Node Status List based on their corresponding status. The available statuses are Pass (successful invocation of a node), Warn (test executed with a warning), Error (database error or test failure), Skip (nodes not run due to upstream error), and Queued (nodes that have not executed yet).
 
@@ -150,25 +150,25 @@ You can open the drawer in multiple ways:
 ## Modals and Menus
 Use menus and modals to interact with IDE and access useful options to help your development workflow. 
 
-- **Editor tab menu &mdash;** To interact with open editor tabs, right-click any tab to access the helpful options in the file tab menu.<Lightbox src="/img/docs/dbt-cloud/cloud-ide/editor-tab-menu-with-save.jpg" width="100%" title=" Right-click a tab to view the Editor tab menu options"/>
+- **Editor tab menu &mdash;** To interact with open editor tabs, right-click any tab to access the helpful options in the file tab menu.<Lightbox src="/img/docs/dbt-cloud/cloud-ide/editor-tab-menu-with-save.jpg" width="90%" title=" Right-click a tab to view the Editor tab menu options"/>
 
 - **File Search &mdash;** You can easily search for and navigate between files using the File Navigation menu, which can be accessed by pressing Command-O or Control-O or clicking on the 🔍 icon in the File Explorer.
-<Lightbox src="/img/docs/dbt-cloud/cloud-ide/ide-file-search-with-save.jpg" width="100%" title="The Command History returns a log and detail of all your dbt Cloud invocations."/>
+<Lightbox src="/img/docs/dbt-cloud/cloud-ide/ide-file-search-with-save.jpg" width="90%" title="The Command History returns a log and detail of all your dbt Cloud invocations."/>
 
 - **Global Command Palette&mdash;** The Global Command Palette provides helpful shortcuts to interact with the IDE, such as git actions, specialized dbt commands, and compile, and preview actions, among others. To open the menu, use Command-P or Control-P.
-<Lightbox src="/img/docs/dbt-cloud/cloud-ide/ide-global-command-palette-with-save.jpg" width="100%" title="The Command History returns a log and detail of all your dbt Cloud invocations."/>
+<Lightbox src="/img/docs/dbt-cloud/cloud-ide/ide-global-command-palette-with-save.jpg" width="90%" title="The Command History returns a log and detail of all your dbt Cloud invocations."/>
 
 - **IDE Status modal &mdash;**  The IDE Status modal shows the current error message and debug logs for the server. This also contains an option to restart the IDE. Open this by clicking on the IDE Status button.
-<Lightbox src="/img/docs/dbt-cloud/cloud-ide/ide-status-modal-with-save.jpg" width="100%" title="The Command History returns a log and detail of all your dbt Cloud invocations."/>
+<Lightbox src="/img/docs/dbt-cloud/cloud-ide/ide-status-modal-with-save.jpg" width="90%" title="The Command History returns a log and detail of all your dbt Cloud invocations."/>
 
 - **Commit Changes modal &mdash;** The Commit Changes modal is accessible via the Git Actions button to commit all changes or via the Version Control Options menu to commit individual changes. Once you enter a commit message, you can use the modal to commit and sync the selected changes.
-<Lightbox src="/img/docs/dbt-cloud/cloud-ide/commit-changes-modal.png" width="100%" title="The Commit Changes modal is how users commit changes to their branch."/>
+<Lightbox src="/img/docs/dbt-cloud/cloud-ide/commit-changes-modal.png" width="90%" title="The Commit Changes modal is how users commit changes to their branch."/>
 
 - **Change Branch modal &mdash;** The Change Branch modal allows users to switch git branches in the IDE. It can be accessed through the `Change Branch` link or the Git Actions button in the Version Control menu.
-<Lightbox src="/img/docs/dbt-cloud/cloud-ide/change-branch-modal.png" width="100%" title="The Commit Changes modal is how users change their branch."/>
+<Lightbox src="/img/docs/dbt-cloud/cloud-ide/change-branch-modal.png" width="90%" title="The Commit Changes modal is how users change their branch."/>
 
 - **Revert Uncommitted Changes modal &mdash;** The Revert Uncommitted Changes modal is how users revert changes in the IDE. This is accessible via the `Revert File` option above the Version Control Options menu, or via the Git Actions button when there are saved, uncommitted changes in the IDE.
-<Lightbox src="/img/docs/dbt-cloud/cloud-ide/revert-uncommitted-changes-with-save.jpg" width="100%" title="The Commit Changes modal is how users change their branch."/>
+<Lightbox src="/img/docs/dbt-cloud/cloud-ide/revert-uncommitted-changes-with-save.jpg" width="90%" title="The Commit Changes modal is how users change their branch."/>
 
 - **IDE Options menu &mdash;** The IDE Options menu can be accessed by clicking on the three-dot menu located at the bottom right corner of the IDE. This menu contains global options such as:
 

website/docs/docs/cloud/dbt-cloud-ide/lint-format.md

@@ -63,7 +63,7 @@ Linting doesn't support ephemeral models in dbt v1.5 and lower. Refer to the [FA
     - **Fix** button — Automatically fixes linting errors in the **File editor**. When fixing is complete, you'll see a message confirming the outcome. 
     - Use the **Code Quality** tab to view and debug any code errors.
 
-<Lightbox src="/img/docs/dbt-cloud/cloud-ide/ide-lint-format-console.gif" width="95%" title="Use the Lint or Fix button in the console section to lint or auto-fix your code."/>
+<Lightbox src="/img/docs/dbt-cloud/cloud-ide/ide-lint-format-console.gif" width="90%" title="Use the Lint or Fix button in the console section to lint or auto-fix your code."/>
 
 ### Customize linting
 
@@ -130,7 +130,7 @@ group_by_and_order_by_style = implicit
 For more info on styling best practices, refer to [How we style our SQL](/best-practices/how-we-style/2-how-we-style-our-sql).
 :::
 
-<Lightbox src="/img/docs/dbt-cloud/cloud-ide/ide-sqlfluff-config.jpg" width="95%" title="Customize linting by configuring your own linting code rules, including dbtonic linting/styling."/>
+<Lightbox src="/img/docs/dbt-cloud/cloud-ide/ide-sqlfluff-config.jpg" width="90%" title="Customize linting by configuring your own linting code rules, including dbtonic linting/styling."/>
 
 ## Format
 
@@ -158,7 +158,7 @@ To enable sqlfmt:
 6. Once you've selected the **sqlfmt** radio button, go to the console section (located below the **File editor**) to select the **Format** button.
 7. The **Format** button auto-formats your code in the **File editor**. Once you've auto-formatted, you'll see a message confirming the outcome. 
 
-<Lightbox src="/img/docs/dbt-cloud/cloud-ide/sqlfmt.gif" width="95%" title="Use sqlfmt to format your SQL code."/>
+<Lightbox src="/img/docs/dbt-cloud/cloud-ide/sqlfmt.gif" width="90%" title="Use sqlfmt to format your SQL code."/>
 
 ### Format YAML, Markdown, JSON
 
@@ -169,7 +169,7 @@ To format your YAML, Markdown, or JSON code, dbt Cloud integrates with [Prettier
 3. In the console section (located below the **File editor**), select the **Format** button to auto-format your code in the **File editor**. Use the **Code Quality** tab to view code errors. 
 4. Once you've auto-formatted, you'll see a message confirming the outcome. 
 
-<Lightbox src="/img/docs/dbt-cloud/cloud-ide/prettier.gif" width="95%" title="Format YAML, Markdown, and JSON files using Prettier."/>
+<Lightbox src="/img/docs/dbt-cloud/cloud-ide/prettier.gif" width="90%" title="Format YAML, Markdown, and JSON files using Prettier."/>
 
 
 You can add a configuration file to customize formatting rules for YAML, Markdown, or JSON files using Prettier. The IDE looks for the configuration file based on an order of precedence. For example, it first checks for a "prettier" key in your `package.json` file.
@@ -185,7 +185,7 @@ To format your Python code, dbt Cloud integrates with [Black](https://black.read
 3. In the console section (located below the **File editor**), select the **Format** button to auto-format your code in the **File editor**. 
 4. Once you've auto-formatted, you'll see a message confirming the outcome. 
 
-<Lightbox src="/img/docs/dbt-cloud/cloud-ide/python-black.gif" width="95%" title="Format Python files using Black."/>
+<Lightbox src="/img/docs/dbt-cloud/cloud-ide/python-black.gif" width="80%" title="Format Python files using Black."/>
 
 ## FAQs
 

website/docs/docs/cloud/manage-access/cloud-seats-and-users.md

@@ -136,8 +136,7 @@ to allocate for the user. If your account does not have an available license to
 allocate, you will need to add more licenses to your plan to complete the license
 change.
 
-<Lightbox src="/img/docs/dbt-cloud/access-control/license-manual.png"
-          title="Manually assigning licenses"/>
+<Lightbox src="/img/docs/dbt-cloud/access-control/license-manual.png" title="Manually assigning licenses"/>
 
 ### Mapped configuration