ENH: [frontend/src/components/QuestionCard.astro] inlined Icons svg t…

…o allow for prefetch

frontend/src/components/CodeBlock/CodeBlock.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import Icon from "@iconify/svelte";
   import { clickoutside } from "@svelte-put/clickoutside";
   import { shortcut } from "@svelte-put/shortcut";
   import { onThemeChange } from "src/utils/onThemeChange";
@@ -127,19 +126,18 @@
     disabled={running}
     on:click={() => handleRun(true)}
   >
-    <Icon icon="carbon:run" width={24} />
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 32 32"><path fill="currentColor" d="M21 16a6 6 0 1 1-6 6a6 6 0 0 1 6-6m0-2a8 8 0 1 0 8 8a8 8 0 0 0-8-8"/><path fill="currentColor" d="M26 4H6a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h4v-2H6V12h22V6a2 2 0 0 0-2-2M6 10V6h20v4Z"/><path fill="currentColor" d="M19 19v6l5-3z"/></svg>
   </button>
 
   <button title="Reset code" on:click={() => (value = code)}>
-    <Icon icon="carbon:reset" width={24} />
+    <!-- carbon:reset -->
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 32 32"><path fill="currentColor" d="M18 28A12 12 0 1 0 6 16v6.2l-3.6-3.6L1 20l6 6l6-6l-1.4-1.4L8 22.2V16a10 10 0 1 1 10 10Z"/></svg>
   </button>
 
   {#if playgroundResponse}
     <output>
       <p>{playgroundResponse}</p>
     </output>
-
-
   {/if}
 </div>
 
@@ -160,7 +158,7 @@
     margin: 0rem;
 
     font-size: 0.9rem;
-    grid-template-columns: 80% auto auto;
+    grid-template-columns: auto 30px 30px;
   }
   @media only screen and (min-width: 768px) {
     .wrapper {
@@ -179,10 +177,10 @@
     margin-left: 0rem;
     padding-bottom: 0px;
     height: fit-content;
-    transition: color 0.25s ease;
+    transition: opacity 0.25s ease;
   }
   button:disabled {
-    opacity: 0.8;
+    opacity: 0.2;
   }
   output {
     font-size: 1rem;